如何在react-i18n中处理含HTML表格的国际化需求？

有两种可行方案可以直接在translation.json中保留完整表格结构实现国际化，无需拆分表格与文本：

方案一：使用t函数配合dangerouslySetInnerHTML #

直接在翻译文件中存储完整的HTML表格字符串，通过dangerouslySetInnerHTML渲染：

1. 在translation.json中定义模板：

{
  "email_template": "<table><tr><td>Hello User</td></tr><tr><td>Please visit the site for exclusive offers</td></tr></table>"
}

2. 组件中渲染：

import { useTranslation } from 'react-i18next';

function EmailTemplate() {
  const { t } = useTranslation();
  return <div dangerouslySetInnerHTML={{ __html: t('email_template') }} />;
}

注意：使用dangerouslySetInnerHTML时，必须确保翻译内容是可信的，避免引入XSS风险（不要将用户输入的未过滤内容直接放入翻译字符串）。如果需要动态插入变量，可结合插值语法：

{
  "email_template": "<table><tr><td>Hello {{user_name}}</td></tr><tr><td>Please visit <a href='{{offer_url}}'>the site</a> for exclusive offers</td></tr></table>"
}

组件中传参：

const templateHtml = t('email_template', { 
  user_name: 'Alice', 
  offer_url: '/exclusive-deals' 
});
return <div dangerouslySetInnerHTML={{ __html: templateHtml }} />;

方案二：使用Trans组件的标签索引匹配 #

如果不想用dangerouslySetInnerHTML，可以利用Trans组件的标签自动匹配功能，将表格结构作为Trans的子元素，翻译文件中存储标签索引占位符：

1. 在translation.json中定义带索引的结构：

{
  "email_template": "<0><1><2>Hello User</2></1><1><2>Please visit the site for exclusive offers</2></1></0>"
}

2. 组件中通过Trans渲染：

import { Trans } from 'react-i18next';

function EmailTemplate() {
  return (
    <Trans i18nKey="email_template">
      <table>
        <tr>
          <td>Hello User</td>
        </tr>
        <tr>
          <td>Please visit the site for exclusive offers</td>
        </tr>
      </table>
    </Trans>
  );
}

这种方式会让react-i18n自动将翻译字符串中的<0>、<1>等索引对应到Trans子元素的DOM节点，文本内容可直接在翻译文件中修改。

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