i18n 反应 return [对象对象]

Question

我有一个这样的对象:

{
 comment: "autogenerated"
 createdDate: "2021-09-21T14:32:47"
 id: 7831
 lastModifiedDate: "2021-09-21T14:32:47"
 media: "LETTER"
}

知道 media 可以 return 不同的值，例如：“LETTER”、“PHONE”、“EMAIL”。

我希望我的翻译根据 media

编辑的值 return 进行更改

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

presentMedia() 函数 return 是基于 media

编辑的值 return 的翻译

 const presentMedia = (media: string) => {
      switch (media) {
       case 'PHONE':
        return <span>t('press.media.phone')</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>t('press.media.email')</span>;
      }
     };

i18n 文件：

 "press": {
   "text": "files {{media}}",
   "media": {
     "phone": " by phone",
     "letter": "bu letter",
     "email": "bu email"
   },

另一方面，函数 presentMedia return [object, Object] 而我想恢复 switch

中存在的翻译

如果我用一个简单的字符串替换 {t('press.media.letter')} 它 test 它会显示

在函数中使用 i18n React 有问题吗？

可能有另一种解决方案会给我相同的结果？

Answer 1

这些案例不一样，其中2个缺少{}。修复它们以查看问题是否已解决。如果不是，请向我们提供 t.

的代码

       case 'PHONE':
        return <span>t('press.media.phone')</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>t('press.media.email')</span>;

Answer 2

这里有一个带有示例的 CodeSanbox：https://codesandbox.io/s/cranky-allen-oujoc?file=/src/App.js

错误是：presetMedia 返回了 [object Object]，因为您也返回了 。所以，它是一个 React 节点（或 [objectObject]）

我建议更改：

 const presentMedia = (media: string) => {
      switch (media) {
       case 'PHONE':
        return <span>{t('press.media.phone')}</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>{t('press.media.email')}</span>;
      }
     };

对此：

const presentMedia = (media: string) => {
  switch (media) {
    case 'PHONE':
      return t('press.media.phone');

    case 'LETTER':
      return t('press.media.letter');

    case 'EMAIL':
      return t('press.media.email');
  }
};

最后，如果可行，我建议更改为：

const presentMedia = (media: string) => t(`press.media.${media.toLowerCase()`);

i18n 反应 return [对象对象]

i18n react return [object object]

internationalization

reactjs

react-i18next