react-i18next

因为react-i18next依赖 i18next , 所有需要同时安装i18next包

npm install react-i18next i18next -S

配置

在src下新建i18n文件夹，以存放国际化相关配置

i18n中分别新建三个文件：

• config.js：对 i18n 进行初始化操作及插件配置
• en.json：英文语言配置文件
• zh.json：中文语言配置文件

config.js：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import translation_en from "./en.json";
import translation_zh from "./zh.json";

const resources = {
  en: {
    translation: translation_en,
  },
  zh: {
    translation: translation_zh,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

en.json:

{
  "language": "English",
  "header": {
    "conquest": "Conquest and Conquest"
  }
}

zh.json

{
  "language": "中文",
  "header": {
    "conquest": "征服"
  }
}

在index.js中引入import "./i18n/config"; // 引用配置文件

在 函数式组件 中使用useTranslation 的 hook 来处理国际化

import { useTranslation } from "react-i18next";
function Play() {
  const { t, i18n } = useTranslation();
  return (
    <div className="play_container">
      <div className="header">
        <div>
          <img src={Logo_min} alt="" />
          // t{} 控制显示语言类型
          <span>{t("header.conquest")}</span>
        </div>
        // 切换其他类型语言
        <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
          <option value="en">English</option>
          <option value="zh">中文</option>
        </select>
      </div>
  </div>