带有包含 HTML 标记的翻译的 React-i18n Trans 组件不起作用答案

【问题标题】：React-i18n Trans Component with translations that contain HTML tags not working带有包含 HTML 标记的翻译的 React-i18n Trans 组件不起作用
【发布时间】：2020-04-17 09:14:34
【问题描述】：

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

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

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

欢迎来到我们的网站，约翰

使用 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？

提前致谢。

【问题讨论】：

标签： reactjs i18next react-i18next

【解决方案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

【讨论】：

这个答案让我困惑了很长时间，因为我仍然不知道如何将{{ name }}替换为实际值（John）。我了解到您可以为此目的在 trans 组件中使用 {{name: 'John'}} 而不是 {{name}}。
` const name = 'John' return ( 欢迎来到我们的网站，{{name}} ) `跨度>
对我来说完全没有意义，翻译在哪里起作用？
翻译文本几乎是硬编码，那么重点在哪里？
@Guichi 我也有同样的问题，所以发布了answer above

【解决方案2】：

我刚刚发布了一个我可以解决的类似问题的答案，但在 React Native 中，应该也可以在 React 中工作： https://stackoverflow.com/a/70112582/9506908

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

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

【讨论】：

【解决方案3】：

在这里发帖是因为这是 interwebz 上的第一个搜索结果，并且没有一个答案适合我的情况。

我的翻译 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...
/>

所以它看起来像这样：

存储： 2TB SSD

【讨论】：