如何在.js或.json非组件文件中使用react-i18next？

有两种成熟的实现方案，你可以根据自己的业务场景选择：

方案一：直接导入i18n实例调用翻译方法 #

你可以在i18n的初始化文件中导出已经配置好的i18n实例，在非组件的JS文件中直接导入实例调用t方法即可。

1. 首先修改你的i18n初始化文件（通常为i18n.js或i18n/index.js），导出实例：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 其他资源导入、配置项省略

i18n
  .use(initReactI18next)
  .init({
    // 你的i18n配置
  });

// 导出初始化完成的i18n实例
export default i18n;

2. 在数据文件中直接导入实例使用：

import i18n from './你的i18n文件路径/i18n';

export const slideInfo = [
    {
        id: 1,
        img: "https://i.imgur.com/g2weSNQ.png",
        title: i18n.t("title")
    },
    // 其余配置项同理
]

注意：该方案需要确保你导入数据文件时，i18n已经完成初始化，否则会出现翻译失效的问题；另外如果需要支持切换语言后自动更新，还需要额外监听i18n的语言变化事件刷新数据。

方案二：数据存储翻译key，组件使用时再翻译（更推荐） #

这个方案不会受i18n初始化时机影响，且天然支持切换语言自动响应，不需要额外逻辑，数据还可以直接用纯JSON存储更简洁。

1. 数据文件（可直接用JSON）存储翻译对应的key：

// data.json
[
    {
        "id": 1,
        "img": "https://i.imgur.com/g2weSNQ.png",
        "titleKey": "title"
    },
    {
        "id": 2,
        "img": "https://i.imgur.com/g2weSNQ.png",
        "titleKey": "subTitle"
    },
    {
        "id": 3,
        "img": "https://i.imgur.com/g2weSNQ.png",
        "titleKey": "otherTitle"
    }
]

2. 在组件中使用时，通过useTranslation的t方法翻译对应的key即可：

import { useTranslation } from 'react-i18next';
import slideInfo from './data.json';

function SliderComponent() {
  const { t } = useTranslation();

  return (
    <div className="slider">
      {slideInfo.map(item => (
        <div key={item.id} className="slide-item">
          <img src={item.img} alt="" />
          <h3>{t(item.titleKey)}</h3>
        </div>
      ))}
    </div>
  )
}

如果有需要插值的翻译内容，也可以把插值参数一起存在数据中：

{
    "id": 4,
    "img": "xxx.png",
    "titleKey": "welcomeTip",
    "titleParams": {"name": "访客"}
}

组件中调用时直接传参即可：

t(item.titleKey, item.titleParams)

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