Question

我正在尝试将react-i18nnext与包含一些HTML标记的翻译json一起使用，

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

在我的React组件中，我希望字符串以这种方式呈现。

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

通常使用useTranslation函数按原样打印字符串，而不会像Welcome to our site, John那样将其解释为HTML。

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

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

1 个答案: