Question

我有一个翻译后的键列表，并对组件内容做出反应。例如：

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

这个想法是使用带有地图功能的i18next-react的Trans Component使用“翻译”和“内容”结构显示列表中的翻译数据。

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

不幸的是，这似乎根本不起作用，结果只是翻译后的字符串，而没有React Component内容应具有的结构。

有任何解决方法吗？

Answer 1

您的内容是纯字符串，而不是react元素。因此，您的代码无法正常工作->无法从字符串中提取a元素并将其替换为<1>。

在下面编辑

样本：

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

您需要传递组件以将其插值到“ pseudo”标签中。<0> ...详细信息还请查看https://react.i18next.com/misc/using-with-icu-format（用于道具默认值，组件，值）

Answer 2

以防万一将来有人尝试这样做：这样做的方法是使用Jamuhl提到的components道具。并传递一个包含“ item.content”的HTML元素的数组。如我们在“ item.content”上那样从字符串获取HTML元素数组的方法是使用ReactHtmlParser将字符串解析为HTML元素数组！可以从此处克隆ReactHtmlParser：https://www.npmjs.com/package/react-html-parser

Trans Component i18next内部的动态内容

2 个答案: