i18nTranslation中h1标签与类名丢失，React渲染异常求助

原因分析 #

你当前的写法存在两个核心问题：

1. <Trans> 组件并非直接渲染HTML字符串，它的设计初衷是处理结构化的多段文本替换，而非完整HTML块的解析，所以会导致标签识别异常、仅渲染部分内容。
2. 翻译字符串里的 className 只是纯文本的一部分，不会被React解析为DOM元素的属性，自然无法生效。

方案一：使用 dangerouslySetInnerHTML 直接解析HTML字符串 #

如果想保留现有JSON里的HTML格式，可以通过useTranslation的t函数获取翻译文本，再用dangerouslySetInnerHTML渲染：

import { useTranslation } from 'react-i18next';

function HomeComponent() {
  const { t } = useTranslation();
  return (
    <div dangerouslySetInnerHTML={{ __html: t('homeScreen:h1AndP') }} />
  );
}

注意：这种方式存在XSS风险，仅当你能完全控制翻译内容的安全性时使用。

方案二：用 <Trans> 组件的结构化映射（推荐） #

这是更符合React+i18next最佳实践的方式，把翻译文本和React元素分离：

1. 修改翻译JSON #

将标签替换为数字占位符：

"homeScreen": {
  "h1AndP": {
    "en": "<1>Testing the heading</1><2>Testing p tags</2>",
    "ar": "<1>مرحباً</1><2>مرحباً</2>"
  }
}

2. 调整React代码 #

在<Trans>组件内定义对应位置的React元素，直接给元素添加className：

<Trans i18nKey="homeScreen:h1AndP">
  <h1 />
  <p className='lg:text-4xl font-semibold' />
</Trans>

这里<1>会映射到<Trans>内的第一个子元素<h1>，<2>映射到第二个子元素<p>，类名会直接生效，同时避免XSS风险。

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