Перевод в реагирующие узлы

Question

Вместо перевода, как в этом basi c примере

{
    "key": "{{what}} is {{how}}"
}

i18next.t('key', { what: 'i18next', how: 'great' });
// -> "i18next is great"

Мне нужен результат типа

<i>i18next</i> is <i>great</i>

в качестве узла реакции, чтобы отображается как

i18следующий отлично

Я мог бы сгенерировать строку "<i>i18next</i> is <i>great</i>" и использовать ее с dangerouslySetInnerHTML , но это уродливо и опасно.

Я мог бы разделить ключ как

{
    "key1": "{{what}}",
    "key2": "is",
    "key3": "{{how}},
}

и использовать

const params = { what: 'i18next', how: 'great' };
return <>
   <i>{i18next.t('key1', params)}</i>
   {i18next.t('key2', params);}
   <i>{i18next.t('key3', params)}</i>
<>

, который безопасен, но еще более уродлив. Более того, в общем случае требуется разделить каждый ключ с n аргументами на 2*n+1 частей, которые связаны только соглашением об именах.

Мы хотели бы применить некоторое форматирование ( не обязательно <i>; это был просто пример) для всех параметров, поэтому нам нужно лучшее решение. Я не ищу библиотеку, i18next был просто примером. Есть идеи?

Answer 1

Вы можете попробовать использовать Trans Component

Ключ, похожий на

key: "<0>{{what}}</0> is <2>{{how}}</2>"

, можно использовать с

//  const what = "Pizza";
//  const how = "great";

<Trans i18nKey="key">
  <strong>{{ what }}</strong> is <i>{{ how }}</i>
</Trans>

и будет производить: Пицца это отлично

Вот игровая площадка codesandbox

Надеюсь, это поможет!

---

Другие библиотеки делают это по-другому - например: реагировать-intl могут обрабатывать теги в определениях языков - этот пример