React i18next t方法传入JSX插值显示[object Object]的解决方法

默认状态下i18next的t方法是纯文本字符串处理逻辑，所有插值参数都会被强制转为字符串后完成文案拼接。当插值参数传入JSX元素时，会自动执行对象的toString方法，最终渲染出[object Object]的异常结果。要在不使用Trans组件的前提下实现JSX插值的正确渲染，核心是打破原生t方法的字符串拼接限制，把最终的文本拆分片段和JSX元素组合成React可识别的节点结构。

核心思路 #

• 提前识别插值参数里的JSX元素，把JSX临时替换为不会和业务文案冲突的唯一占位符，传入原生t方法拿到纯文本的翻译结果
• 按占位符把拿到的翻译文本拆分成独立片段
• 把片段里的占位符替换回对应的JSX元素，组合成可直接被React渲染的节点数组

通用封装实现 #

先写一个通用的支持JSX插值的t方法工具：

import React from "react";

/**
 * 支持JSX插值的t方法封装
 * @param {Function} t 原生react-i18next返回的t方法
 * @param {string} key 翻译key
 * @param {object} interpolationParams 插值参数对象
 * @returns 可被React直接渲染的节点数组
 */
const tWithJSX = (t, key, interpolationParams = {}) => {
  const nodeMap = {};
  const processedParams = {};

  // 遍历插值参数，识别JSX元素并替换为占位符
  Object.entries(interpolationParams).forEach(([paramKey, paramValue], index) => {
    if (React.isValidElement(paramValue)) {
      const placeholder = `__CUSTOM_REACT_NODE_${index}__`;
      nodeMap[placeholder] = paramValue;
      processedParams[paramKey] = placeholder;
    } else {
      processedParams[paramKey] = paramValue;
    }
  });

  // 调用原生t方法获取带占位符的纯翻译文本
  const translatedText = t(key, processedParams);

  // 切割文本，替换占位符为实际JSX元素
  return translatedText
    .split(/(__CUSTOM_REACT_NODE_\d+__)/g)
    .map((segment) => {
      if (nodeMap[segment]) {
        return <React.Fragment key={segment}>{nodeMap[segment]}</React.Fragment>;
      }
      return segment;
    });
};

业务代码改造 #

原来的业务组件只需要把直接调用t的地方，替换成上面封装的tWithJSX方法即可，写法习惯和原来几乎无差异：

import React from "react";
import {useTranslation} from "react-i18next";
import MoneyDisplay from "../../../components/_generals/MoneyDisplay";
import { tWithJSX } from "./i18nUtils";

const minAmount = 1000;
const MyCompo = () => {
    const {t} = useTranslation();
    // 调用封装方法拿到可渲染的内容
    const content = tWithJSX(
      t,
      'expr:Minimum amount for issue a new pre-invoice is {{minAmount}}',
      {minAmount: <MoneyDisplay value={minAmount} longUnit/>}
    );
    return <div>{content}</div>;
};
export default MyCompo;

优化建议 #

• 可以把上述封装逻辑整合到自定义的useTranslationhook中，调用时无需手动传入原生t方法，进一步简化调用代码
• 占位符规则可根据实际业务场景调整，只要保证占位符字符串不会和正常翻译文案冲突即可
• 该方案完全兼容原有纯文本插值的使用逻辑，没有额外的语法学习成本，和Trans组件的使用场景互不冲突

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