React i18next如何翻译独立文件中存储的对象数据？

针对你遇到的「在独立数据文件中无法使用useTranslation Hook」的问题，这里有3种实用的解决方案：

方案1：在组件中翻译数据（推荐） #

核心思路是让数据文件只存储翻译key，把翻译逻辑移到使用数据的React组件中（完全符合Hook的使用规则）。

步骤： #

1. 修改CityAttractions.js，存储翻译key而非原始文本：

// CityAttractions.js
export const cityAttractions = {
  paris: {
    name: "city.paris",
    attractions: ["attraction.eiffel_tower", "attraction.louvre"]
  },
  tokyo: {
    name: "city.tokyo",
    attractions: ["attraction.senso_ji", "attraction.shibuya_crossing"]
  }
};

2. 在组件中使用useTranslation翻译：

// City.js
import { useTranslation } from 'react-i18next';
import { cityAttractions } from './CityAttractions';

function City({ cityName }) {
  const { t } = useTranslation();
  const cityData = cityAttractions[cityName];

  return (
    <div>
      <h2>{t(cityData.name)}</h2>
      <ul>
        {cityData.attractions.map(attractionKey => (
          <li key={attractionKey}>{t(attractionKey)}</li>
        ))}
      </ul>
    </div>
  );
}

优点：完全遵循React Hook规则，无初始化时机问题，翻译逻辑和组件渲染绑定，自动跟随语言切换更新。

方案2：直接使用i18next实例翻译（非组件环境） #

如果必须在数据文件中直接生成翻译后的数据，可以导入i18next的初始化实例，直接调用其t方法（注意要确保i18next已经完成初始化）。

步骤： #

1. 确保你的i18next初始化文件（比如i18n.js）已经导出实例：

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import zh from './locales/zh.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      zh: { translation: zh }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  });

export default i18n;

2. 在CityAttractions.js中导入并使用：

// CityAttractions.js
import i18n from './i18n';

export const cityAttractions = {
  paris: {
    name: i18n.t("city.paris"),
    attractions: [i18n.t("attraction.eiffel_tower"), i18n.t("attraction.louvre")]
  }
};

注意：这种方式生成的数据是静态的，语言切换时不会自动更新，除非重新加载数据文件。适合不需要动态切换语言的场景。

方案3：封装为自定义Hook #

把数据和翻译逻辑封装成自定义Hook，既可以在Hook中合法使用useTranslation，又能让组件直接获取翻译后的数据。

步骤： #

1. 创建自定义Hook：

// useCityAttractions.js
import { useTranslation } from 'react-i18next';

const rawCityAttractions = {
  paris: {
    name: "city.paris",
    attractions: ["attraction.eiffel_tower", "attraction.louvre"]
  },
  tokyo: {
    name: "city.tokyo",
    attractions: ["attraction.senso_ji", "attraction.shibuya_crossing"]
  }
};

export function useCityAttractions() {
  const { t } = useTranslation();
  
  // 实时翻译数据
  const translatedData = Object.fromEntries(
    Object.entries(rawCityAttractions).map(([cityKey, cityInfo]) => [
      cityKey,
      {
        name: t(cityInfo.name),
        attractions: cityInfo.attractions.map(key => t(key))
      }
    ])
  );

  return translatedData;
}

2. 在组件中使用：

// Attraction.js
import { useCityAttractions } from './useCityAttractions';

function Attraction({ cityName }) {
  const attractionsData = useCityAttractions();
  const attractions = attractionsData[cityName].attractions;

  return (
    <div>
      {attractions.map((name, idx) => (
        <p key={idx}>{name}</p>
      ))}
    </div>
  );
}

优点：封装性好，组件无需关心翻译逻辑，语言切换时数据会自动更新，完全符合Hook规则。

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