如何在i18n中使用Trans标签处理含HTML标签的JSON翻译键

当翻译JSON中的HTML标签被当作字符串渲染时，核心原因是Trans组件默认会转义HTML以避免XSS风险。以下是针对不同场景的解决方案：

场景1：处理无属性的简单标签（如<b>） #

推荐方案：组件插值法 #

修改翻译文件，用数字占位符替换HTML标签：

"RESPONSIBLE": "<0>Responsible</0> is {{name}}"

在组件中通过components属性传入对应标签：

<Trans i18nKey="RESPONSIBLE" components={[<b />]} name="Jon" />

这里的<0>会被components数组中索引为0的<b>组件替换，最终渲染出加粗的Responsible is Jon。

备选方案：关闭全局转义（不推荐） #

如果信任所有翻译内容，可在i18next初始化时关闭HTML转义：

i18n.init({
  interpolation: {
    escapeValue: false // 禁用HTML转义，所有翻译文本中的HTML都会被解析
  }
});

之后直接使用Trans组件或t函数即可：

<Trans i18nKey="RESPONSIBLE" name="Jon" />
// 或
{t('RESPONSIBLE', {name: 'Jon'})}

⚠️ 注意：该方法存在XSS风险，仅适用于完全可控的翻译内容。

场景2：处理带属性的标签（如带class和href的<a>） #

组件插值+动态属性法 #

修改翻译文件，用数字占位符替换整个标签部分：

"NO_ACTIVE": "Please go to the <0>Go Here</0>"

在组件中定义带属性的<a>元素，通过components传入：

const targetLink = '/your-target-path'; // 动态链接可以是变量或其他翻译键

<Trans i18nKey="NO_ACTIVE" components={[
  <a className="no-wrap" href={targetLink} />
]} />

这种方式既能保留标签的属性，又能安全地渲染出可点击的链接。

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