如何将 html 代码放入 react i18next json 翻译文件中？

Question

我有多种语言的博客页面，我使用 react-i18next 库进行翻译。我有一个名为 BlogPostPage 的组件，当它打开时，我会在其中显示每个 post，在该组件内部，有一部分用于显示博客文本，如下所示：

    import { useTranslation } from "react-i18next";
      const [t] = useTranslation(["translation1", "overview"]);
          ..........
        <Typography mb={2} component="p" variant="subtitle1">
            {t(`text${state.id}1`)}
        </Typography>

我的 json 翻译文件如下所示

{
"text51":"<h4>Welcome to our application</h4>",
}

所以我想把 html 代码放在翻译文本中，因为不同的 post 有不同的 html 代码，它确实需要在 json 文件中而不是在组件...有什么办法可以做到吗？

我的代码输出是：

<h4>Welcome to our application</h4>

Answer 1

你的问题是 React 会尝试转义它在这样的字符串中找到的任何 html。如果您绝对需要这样做，您可以使用以下方法：

<div dangerouslySetInnerHTML={{__html: t(`text${state.id}1`)}} />

请注意，react 调用此 prop dangerouslySetInnerHTML 是有原因的，这样做非常 anti-pattern。

Answer 2

使用反式组件：https://react.i18next.com/latest/trans-component

<Trans i18nKey="text51">
  <h4>Welcome to our application</h4>
</Trans>

用<0>代替<h4>

"text51": "<0>Welcome to our application</0>"

如何将 html 代码放入 react i18next json 翻译文件中？

How to put html code inside react18next json translation file?

javascript

reactjs

json

translation

react-i18next