Trans Component i18next 中的动态内容

Question

我有一个翻译键列表和 React 组件内容。例如：

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

想法是使用 "translation" 和 "content" 的结构以及 i18next-react 的 Trans Component 和 map 函数来显示列表中的翻译数据。

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

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

知道如何解决这个问题吗？

Answer 1

您的内容是纯字符串，不是 React 元素。因此您的代码无法工作 -> 它无法从字符串中提取 a 元素并用它替换 <1>。

edit below

示例：

{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 元素的数组。从字符串中获取 HTML 元素数组的方法就像我们在 "item.content" 上那样是通过使用 ReactHtmlParser 将该字符串解析为 HTML 元素数组！ ReactHtmlParser 可以从这里克隆：https://www.npmjs.com/package/react-html-parser

Trans Component i18next 中的动态内容

Dynamic content inside Trans Component i18next

i18next

reactjs

react-i18next