如何使i18next的Trans组件与React一致显示HTML源码？

要让Trans组件像React原生渲染那样显示HTML源码（即页面上呈现<a href="example.com">link</a>这类文本，而非可点击链接或转义后的实体代码），可以通过以下方式实现：

核心思路 #

避免让Trans组件解析或转义HTML字符串，而是将其作为React文本节点插入到翻译内容中，利用React的自动转义机制实现源码显示。

具体实现步骤 #

1. 配置翻译文案 #

在多语言翻译文件中，使用占位符（如<0>）标记搜索文本的插入位置，不要直接在文案中写HTML：

// en.json
{
  "search_result": "Found content: <0>"
}

// ja.json
{
  "search_result": "コンテンツが見つかりました: <0>"
}

2. 用Trans组件传入文本节点 #

将包含HTML的搜索文本作为React文本节点，通过components属性传入Trans组件：

import { Trans } from 'react-i18next';

// 用户提供的含HTML的搜索文本
const userSearchText = '<a href="example.com">link</a>';

// 渲染翻译内容
<Trans i18nKey="search_result" components={[<>{userSearchText}</>]} />

替代写法（无需额外Fragment） #

也可以直接在Trans组件内部嵌套元素，让React自动处理转义：

<Trans i18nKey="search_result">
  找到内容：<span>{userSearchText}</span>
</Trans>

对应的翻译文案中，<0>会自动映射到嵌套的<span>元素，React会将userSearchText转义为纯文本显示。

为什么之前的尝试无效？ #

• 若直接在翻译文案中写HTML并设置escapeValue: false，Trans组件会解析HTML为可点击元素；
• 若设置escapeValue: true，Trans组件会将HTML转义为实体代码（如<a...>），页面会直接显示这些实体字符而非源码；
• 通过React文本节点插入的方式，跳过了Trans组件的HTML解析/转义逻辑，完全由React处理转义，最终页面呈现的就是HTML源码文本。

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