Динамический контент внутри Trans Component i18next

У меня есть список переведенных ключей и содержимое компонентов реакции. например:

    list = [{ translation: "Hello <1>World</1>", content: "Hello <a href='#'>World</a>" },
{ translation: "A <1>B</1>", content: "A <a href='#'>B</a>" }]

Идея состоит в том, чтобы показать переведенные данные из списка с помощью «перевода» и структуры «содержимого» с помощью компонента Trans из i18next-react с функцией карты.

{list.map((item) => (
<Trans i18nKey={item.translation}>
    {item.content}
</Trans>))}

К сожалению, это, похоже, вообще не работает, результатом является только переведенная строка без структуры, которая должна исходить от содержимого React Component.

Есть идеи, как это обойти?


reactjs i18next react-i18next
person Yaniv    schedule 03.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваш контент - это чистая строка, а не элемент реакции. Следовательно, ваш код не может работать -> он не может извлечь элемент a из строки и заменить им <1>.

редактировать ниже

образец:

{list.map((item) => (
<Trans
  i18nKey={item.translation}
  defaults={item.translation} // Hello <0>World</>
  components={[<a href="#">World</a>]}
</Trans>))}

Вам необходимо передать компоненты для интерполяции в «псевдо» теги ‹0> ... подробности также смотрите на https://react.i18next.com/misc/using-with-icu-format (для параметров по умолчанию, компонентов, значений)

person jamuhl    schedule 04.12.2019
comment
Спасибо. Итак, я попытался преобразовать свою строку в элемент реакции с помощью: <Trans i18nKey={item.translation}> <div dangerouslySetInnerHTML={__html:item.content} /> </Trans> Но, к сожалению, это не работает. Что мне не хватает? - person Yaniv; 11.12.2019
comment
Да, я тоже думал об этом направлении. Но дело в том, что [<a href="#">World</a>] является динамическим, а не жестко запрограммированным, поэтому я попытался сделать это components={[item.content]} или components={item.content}, или даже components={[{item.content}]}. Но, похоже, ни один из них не работает на меня. - person Yaniv; 11.12.2019
comment
Этот components={[item.content]} работает хорошо, но дело в том, что данные item.content были интерполированы как строка, а не как элемент HTML. так что он печатает - Hello World без ссылки. Я могу сказать, что это рассматривается как 2 отдельных элемента, но все еще нет ссылки :( - person Yaniv; 11.12.2019
comment
Я сдаюсь ... вы просто настаиваете на том, чтобы выбросить свой item.content где угодно - ›где я покажу вам, что не может работать с Trans ... вам нужно адаптировать свой контент, чтобы он работал ... или просто используйте <div dangerouslySetInnerHTML={__html:item.content} /> без Транс - person jamuhl; 11.12.2019
comment
Очень признателен за вашу помощь. Я настаиваю на item.content, так как это динамическая строка, имеющая форму HTML. Я подумаю о том, как преобразовать это в массив, чтобы тогда я смог использовать поддержку компонентов, спасибо. - person Yaniv; 11.12.2019

arrow_upward
0
arrow_downward

На всякий случай, если кто-то попытается сделать это в будущем: способ сделать это - использовать components props, как упоминал Джамул. И передать туда массив с HTML-элементами «item.content». Способ получить массив элементов HTML из строки, как у "item.content", - это использовать ReactHtmlParser, который анализирует эту строку в массив элементов HTML! ReactHtmlParser можно клонировать отсюда: https://www.npmjs.com/package/react-html-parser

person Yaniv    schedule 15.12.2019