React项目中i18next翻译HTML标签不解析问题求助

你遇到的问题其实很常见——你的配置本身是正确的，但调用翻译的方式不对！t()函数默认只会返回纯文本，不会自动解析HTML标签，哪怕你设置了escapeValue: false。下面给你两种可行的解决方案：

方案1：使用dangerouslySetInnerHTML直接渲染HTML #

这是最直接的方式，把翻译结果通过React的dangerouslySetInnerHTML属性注入到元素中：

<p style={{color:'#A1A1A1', fontWeight:'400'}}>
  <span dangerouslySetInnerHTML={{ __html: t('home_text') }} />
</p>

⚠️ 注意：如果你的翻译内容来自不可信的第三方，这种方式可能存在XSS风险，但如果是你自己维护的translation.json，完全可以放心使用。

方案2：使用<Trans>组件（推荐） #

这是i18next官方推荐的处理带HTML翻译内容的方式，正好匹配你配置里的transSupportBasicHtmlNodes等设置。

首先修改你的翻译文件，把HTML标签改成索引占位符（i18next会自动映射对应的标签）：

"home_text": "hello <0><br/></0> world"

然后在组件中导入并使用<Trans>组件：

import { Trans } from 'react-i18next';

// ...

<p style={{color:'#A1A1A1', fontWeight:'400'}}>
  <Trans i18nKey="home_text">
    {/* 这里的默认内容可选，当翻译缺失时会显示 */}
    hello <br /> world
  </Trans>
</p>

这种方式不仅能正确解析HTML，还支持更复杂的嵌套结构，同时能更好地配合React的渲染机制，避免潜在的安全问题。

为什么你的配置没问题却不生效？因为你开启的transSupportBasicHtmlNodes等配置是专门给<Trans>组件用的，t()函数并不依赖这些配置，所以换用<Trans>就能解决问题啦！

内容的提问来源于stack exchange，提问作者Minos