包含 HTML 标签的翻译的 React-i18n Trans 组件不起作用

Question

我正在尝试将 react-i18next 与包含一些 HTML 标签的翻译 json 一起使用，如下所示：

// en.json
{ "welcome": "Welcome to our site, <strong>{{name}}</strong>" }

在我的 React 组件中，我希望字符串像这样呈现。

Welcome to our site, John

使用 useTranslation 函数通常按字面打印字符串而不将其解释为 HTML，如 Welcome to our site, John.

import React from 'react'
import { useTranslation } from 'react-i18next'

const App = () => {
  const { t } = useTranslation()

  return(
    <div>{t('welcome', { name: 'John' })}</div>
  )
}

我用 dangerouslySetInnerHTML 替换了它并且渲染正确。

<div dangerouslySetInnerHTML={{ __html: t('welcome', { name: 'John' }) }}></div>

但是，我想尽可能避免使用 dangerouslySetInnerHTML。我在文档中读到，您可以使用一种叫做 Trans 组件的东西来翻译带有 HTML 标签。

文档：Using for   and other simple html elements in translations (v10.4.0)

但我对如何使用它们感到困惑，因为它们显示的示例似乎是用于将 <1> 等占位符标签替换为   等实际标签。有没有一种方法可以使用 Trans 组件（或其他一些不使用 dangerouslySetInnerHTML 的方法）来将翻译后的字符串解释为 HTML?

提前致谢。

Answer 1

是的，你做错了。

return (
  <Trans i18nKey="welcome">
    Welcome to our site, <strong>{{name}}</strong>
  </Trans>
)

您的 JSON 文件应如下所示：

"welcome": "Welcome to our site, <1>{{name}}</1>"

你使用 <1> 的原因是因为 Trans 将你的字符串分解成一个数组，所以在这种情况下它是：["Welcome to our site, ", "{{name}}"] https://react.i18next.com/latest/trans-component#how-to-get-the-correct-translation-string

Answer 2

我刚刚发布了一个我可以解决的类似问题的答案，但在 React Native 中应该也能在 React 中工作：

// render
<Trans i18nKey="yourTranslationKey" components={{ link: <Text onPress={() => console.log('do something')}}} /> }} />

// translationFile
{...
 "yourTranslationKey": "Please <link>Click me</link>",
...}```

Answer 3

在这里发帖是因为这是 interwebz 上的第一个搜索结果，none 个答案对我的情况有效。

我的翻译 JSON 是这样的：

"readOnlyField": "<0>{{- key}}:</0> <1>{{- value}}</1>"

我设法让它工作的唯一方法是像这样使用 Trans：

<Trans
  i18nKey="readOnlyField" // the key in your JSON file
  values={{ // The variables in your i18n entry from the JSON file
    key: "Storage",
    value: "2TB SSD",
  }}
  components={[<strong />, <i />]} // The component at index 0 (<strong />) will be parent of <0> ({{- key}}), and so on...
/>

所以它看起来像这样：

Storage: 2TB SSD

包含 HTML 标签的翻译的 React-i18n Trans 组件不起作用

React-i18n Trans Component with translations that contain HTML tags not working

i18next

reactjs

react-i18next