React i18n 如何在翻译文本中插入<a>链接标签？

直接使用t()函数输出带HTML标签的翻译内容时，React会默认转义所有特殊字符防止XSS攻击，所以会把<a>标签原样输出为纯文本，这是预期行为。

你遇到的需要重复编写翻译内容的问题，是对Trans组件的用法不熟悉导致的，不需要重复写两次翻译内容，有两种规范的实现方式： #

方案1：索引式组件映射（适合简单的少量标签场景） #

翻译配置文件写法：

"someText": "To apply, please <0>click here</0>, and fill the form"

组件内调用写法：

<Trans 
  i18nKey="someText" 
  components={[
    <a href="https://example.com" target="_blank" rel="noopener noreferrer" />
  ]} 
/>

说明：翻译内容中的<0>对应components数组的第0位元素，不需要在Trans组件内部编写完整的fallback文本，避免内容重复。 #

方案2：命名式组件映射（适合多标签、易维护的场景） #

翻译配置文件写法：

"someText": "To apply, please <link>click here</link>, and fill the form"

组件内调用写法：

<Trans 
  i18nKey="someText" 
  components={{
    link: <a href="https://example.com" target="_blank" rel="noopener noreferrer" />
  }} 
/>

说明：用命名占位符替代数字索引，可读性更强，后续修改组件顺序也不会出现映射错误，是更推荐的写法。 #

关于你测试的简写方案的说明 #

Trans组件的children属性本身是作为默认fallback内容存在的，当你已经配置了对应i18nKey的翻译内容时，组件会优先读取翻译文件的内容，所以children里的内容会被忽略，你写的x <a>...</a> x才会不影响功能，但这种写法不符合规范，一旦对应翻译缺失，页面就会显示错误的x ... x内容，不建议使用。 #

额外可选方案（不推荐） #

如果你的翻译内容完全由开发团队可控，不存在用户输入或者第三方不可信内容，也可以直接用dangerouslySetInnerHTML渲染：

<div dangerouslySetInnerHTML={{__html: t('someText')}} />

这个方案可以直接复用你最开始的带<a>标签的翻译配置，但存在XSS安全风险，非特殊情况不建议使用。

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