在 React 中添加多语言支持

Source: Dev.to

要在 React 项目中添加多语言支持，我们将使用 react‑i18next，它基于 i18next 构建。
该库提供的组件会在语言切换时自动渲染翻译后的内容，并且可以与任何 UI 框架（如 Angular、Vue 等）一起使用。

文档：

1. 安装所需的包

npm install i18next react-i18next i18next-browser-languagedetector i18next-xhr-backend

2. 创建 i18n 配置文件

在 src 文件夹中创建一个名为 i18n.js 的文件，并粘贴以下代码：

// src/i18n.js
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";

const fallbackLng = ["en"]; // default language

i18n
  .use(Backend)               // loads translation files
  .use(LanguageDetector)       // detects the user language
  .use(initReactI18next)       // passes i18n instance to react-i18next
  .init({
    fallbackLng,
    detection: {
      checkWhitelist: true,
    },
    debug: false,
    interpolation: {
      escapeValue: false, // React already escapes values
    },
    // If you store translations somewhere else, configure the path here:
    // backend: {
    //   loadPath: "/assets/locale/{{lng}}/translation.json",
    // },
  });

export default i18n;

注意： 在 App.js（或根组件）中导入该配置，使其仅运行一次：

import "./i18n";

3. 翻译文件的文件夹结构

public/
└─ locale/
   ├─ en/
   │  └─ translation.json
   └─ fr/
      └─ translation.json

public/locale/en/translation.json

{
  "hello": "Hello",
  "cancel": "Cancel",
  "continue": "Continue"
}

public/locale/fr/translation.json

{
  "hello": "Salut",
  "cancel": "Annuler",
  "continue": "Continuez"
}

如果您更喜欢其他位置（例如 assets/locale），请在 i18n.js 中调整 backend.loadPath 选项：

backend: {
  loadPath: "/assets/locale/{{lng}}/translation.json",
},

4. 在组件中使用翻译

useTranslation hook 为你提供：

• t – 一个通过键获取翻译的函数。
• i18n – i18next 实例，提供 changeLanguage()。

示例：语言选择器组件

// src/components/LanguageSelector.tsx
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { GlobeAltIcon } from "@heroicons/react/24/outline";
import { useTranslation } from "react-i18next";

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}

const countries = [
  { code: "fr", name: "Français", country_code: "fr" },
  { code: "en", name: "English", country_code: "gb" },
];

export const LanguageSelector = () => {
  const { t, i18n } = useTranslation();

  return (
    <Menu as="div" className="relative inline-block text-left">
      {/* ... UI markup ... */}
      {countries.map((lng) => (
        <Menu.Item key={lng.code}>
          {({ active }) => (
            <button
              className={classNames(
                active ? "bg-gray-100" : "",
                "block w-full text-left px-4 py-2 text-sm"
              )}
              onClick={() => i18n.changeLanguage(lng.code)}
            >
              {/* You could add a flag icon using lng.country_code here */}
              {lng.name}
            </button>
          )}
        </Menu.Item>
      ))}
    </Menu>
  );
};

现在你可以在 UI 的任何位置使用 t 函数：

import { useTranslation } from "react-i18next";

export const Greeting = () => {
  const { t } = useTranslation();

  return <h1>{t("hello")}!</h1>;
};

通过选择器切换语言后，所有使用 t 的组件都会立即重新渲染。

5. Recap

1. 安装 i18next、react‑i18next 以及辅助插件。
2. 在 i18n.js 中初始化 i18next，并在一次性导入（例如在 App.js 中）。
3. 将翻译文件存放在 public/locale/<lng>/translation.json 目录下。
4. 使用 useTranslation 获取翻译（t）并切换语言（i18n.changeLanguage）。

现在你已经拥有一个功能完整的多语言 React 应用！ 🚀

语言选择器组件（替代实现）

import { Menu, Transition } from "@headlessui/react";
import { Fragment } from "react";
import { useTranslation } from "react-i18next";

const LanguageSelector = () => {
  const { i18n } = useTranslation();

  const languages = [
    { code: "en", name: "English", country_code: "gb" },
    { code: "fr", name: "Français", country_code: "fr" },
    // add more languages as needed
  ];

  return (
    <>
      <Menu as="div" className="relative inline-block text-left">
        {/* ... UI markup ... */}
        {languages.map((lng) => (
          <Menu.Item key={lng.code}>
            {({ active }) => (
              <button
                className={active ? "bg-gray-100" : ""}
                onClick={() => i18n.changeLanguage(lng.code)}
                disabled={i18n.language === lng.code}
              >
                {lng.name}
              </button>
            )}
          </Menu.Item>
        ))}
      </Menu>
    </>
  );
};

export default LanguageSelector;

工作原理

下拉菜单会显示语言选项以及对应的国家旗帜。当用户选择某种语言时，会调用 i18n.changeLanguage(languageCode)，从而在整个应用中更新语言。

示例表单组件

下面是一个简单的组件，它使用 react‑i18next 提供的 t 函数渲染本地化标签。

import ModuleContainer from "components/shared/moduleContainer/ModuleContainer";
import { useTranslation } from "react-i18next";

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

  return (
    <ModuleContainer>
      <label>{t("hello")}</label>
      <button>{t("cancel")}</button>
    </ModuleContainer>
  );
}

export default SampleForm;

当通过 LanguageSelector 选择语言时，t 函数会自动返回每个键（如 "hello"、"cancel" 等）的相应翻译。此方法使您能够在整个 React 应用中以任何受支持的语言渲染标签和消息。

如果您觉得本篇有帮助，欢迎 订阅、鼓掌、点赞 和 分享。谢谢！