在纯JS文件中使用i18n实现React项目国际化的问题

问题分析 #

当前实现存在两个核心问题：

1. 翻译资源未加载完成就执行翻译：Data.js在i18n初始化及远程翻译资源加载完成前就调用了i18next.t()，此时只能拿到翻译key而非实际翻译文本。
2. 语言切换时无法自动更新：NavigationMenu中的text是静态值，切换语言后不会重新触发翻译，导致菜单文本不更新。

解决方案 #

步骤1：修改Data.js，存储翻译key而非直接翻译 #

不在纯JS文件中提前执行翻译，而是保存对应的翻译key，留到React组件中处理：

// Data.js
export const NavigationMenu = [
  {
    id: 1,
    title: "home",
    textKey: "menu_home", // 存储翻译key
    path: "/"
  },
  {
    id: 2,
    title: "shop",
    textKey: "menu_shop",
    path: "/shop"
  }
];

步骤2：在React组件中使用useTranslation hook动态翻译 #

在Header组件中引入useTranslation，渲染时动态获取翻译文本，既保证翻译资源加载完成后执行，也能在语言切换时自动更新：

// Header.js
import React from "react";
import "./Header.css";
import { NavigationMenu } from "../Data.js";
import { useTranslation } from "react-i18next"; // 引入hook

function Header() {
  const { t } = useTranslation(); // 获取翻译函数

  return (
    <div className="header">
      <div className="header__menu">
        <ul>
          {NavigationMenu.map(item => (
            <li key={item.id}>{t(item.textKey)}</li> {/* 动态翻译 */}
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Header;

可选：纯JS文件中使用翻译的场景（非组件） #

如果确实需要在纯JS文件中使用翻译，需确保i18n初始化完成后再调用i18next.t()，可利用i18n的初始化回调：

// Data.js
import i18next from "./i18n.js";

export let NavigationMenu = [];

// 等待i18n初始化完成后赋值
i18next.on('initialized', () => {
  NavigationMenu = [
    {
      id: 1,
      title: "home",
      text: i18next.t("menu_home"),
      path: "/"
    },
    {
      id: 2,
      title: "shop",
      text: i18next.t("menu_shop"),
      path: "/shop"
    }
  ];
});

注：这种方式在React组件中使用时，需额外监听语言变化并重新获取数据，远不如组件内使用hook便捷。

关键说明 #

• React-i18next的useTranslation hook会自动处理翻译资源加载状态，且在语言切换时触发组件重渲染，保证文本实时更新。
• 避免在静态数据中提前执行翻译，因为静态数据初始化时机早于i18n资源加载完成时间，且无法响应语言变化。

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