React渲染HTML标签时出现[object Object]问题求助

问题根源 #

你直接把React的<a>元素对象传给i18n的插值参数时，i18n的t函数默认会将所有插值转换为字符串，而React元素本质是对象，转成字符串后就变成了[object Object]，这就是异常的原因。

解决方案 #

针对常用的i18n库（比如react-i18next），提供几种可行的解决办法：

方法1：用react-i18next的Trans组件（推荐） #

react-i18next自带的Trans组件专门处理包含React元素的翻译场景，不需要改动原有翻译文件结构：

1. 翻译文件保持不变：

export const en = {
  dhl_agreement_terms: 'I agree to <1>DHL Link</1>.',
};

这里的<1>是占位符，对应Trans组件中子元素的索引。

2. React页面代码修改：

import { Trans } from 'react-i18next';

// ...

return (
  <Trans i18nKey="dhl_agreement_terms">
    I agree to <a href="https://dhlExample.com/">DHL Link</a>.
  </Trans>
);

Trans组件会自动匹配翻译文本里的占位符和传入的React元素，正确渲染出带链接的文本。

方法2：传入返回React元素的插值函数（适配支持函数插值的i18n库） #

如果你的i18n库允许函数作为插值参数，可以直接传一个返回React元素的函数：

1. 翻译文件不变：

export const en = {
  dhl_agreement_terms: 'I agree to {{dhlTerms}}.',
};

2. React页面代码修改：

return (
  <>{t('dhl_agreement_terms', {
    dhlTerms: () => <a href="https://dhlExample.com/">DHL Link</a>
  })}</>
);

注意用<>包裹结果，确保返回的是合法的React元素。

方法3：用dangerouslySetInnerHTML（不推荐，有XSS风险） #

如果以上方法都不适用，也可以把链接转成HTML字符串，再用dangerouslySetInnerHTML渲染，但必须确保链接地址和文本是完全可信的（避免XSS攻击）：

1. 翻译文件不变：

export const en = {
  dhl_agreement_terms: 'I agree to {{dhlTerms}}.',
};

2. React页面代码修改：

const dhlTerms = '<a href="https://dhlExample.com/">DHL Link</a>';

return (
  <div dangerouslySetInnerHTML={{ __html: t('dhl_agreement_terms', { dhlTerms }) }} />
);

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