React i18n插值传入JSX返回[object Object]问题及解决方案咨询

问题根因 #

你遇到的[object Object]报错和普通函数调用React-i18n无关，是以下两个原因导致：

1. i18next 原生的t()函数仅支持字符串类型的插值参数，你传入presentMedia返回的JSX元素对象时，对象会被自动调用toString()方法转为[object Object]
2. 现有代码存在两处笔误：
   • PHONE、EMAIL分支的t()函数没有被{}包裹，不会执行翻译逻辑
   • i18n配置中letter、email对应的翻译值拼写错误，bu应为by

解决方案 #

方案1：直接返回翻译字符串（无特殊样式需求时优先用） #

如果不需要给media对应的翻译单独加特殊样式，直接调整presentMedia返回字符串即可，还可以利用枚举值和翻译key的对应关系省略switch代码：

// 不需要返回JSX，直接返回翻译后的字符串
const presentMedia = (media: string) => {
  // 直接转小写匹配翻译key，省略冗余switch判断
  return t(`press.media.${media.toLowerCase()}`);
};

const renderMedia = (media: string) => {
  return (
    <>
      {t(`press.text`, {
        media: presentMedia(media),
      })}
    </>
  );
};

如果需要给media部分单独加span样式，调整写法把样式加在翻译后的文本外即可。

方案2：使用Trans组件支持JSX插值（需要单独加样式/事件时用） #

如果必须要在插值位置嵌入JSX元素，使用react-i18next提供的Trans组件，它原生支持JSX类型的插值变量：
首先调整i18n配置的text字段，标记插值位置的组件索引：

"press": {
  "text": "files <1>{{media}}</1>",
  "media": {
    "phone": " by phone",
    "letter": "by letter",
    "email": "by email"
  }
}

组件内使用Trans渲染：

import { Trans } from 'react-i18next';

const renderMedia = (media: string) => {
  return (
    <Trans
      i18nKey="press.text"
      components={[<span className="custom-media-class" key="media" />]}
      values={{ media: t(`press.media.${media.toLowerCase()}`) }}
    />
  );
};

内容的提问来源于stack exchange，提问作者Greg-A