【从0搭建react后台管理】5.引入国际化i18next组件

【项目地址】
https://gitee.com/shangqiao1996/member-points-mgmt

---

1. 安装

• 安装依赖 npm i react-i18next i18next --S

2. 配置国际化

• 创建文件：i18n/zh.js

export default {
  username: "用户名",
  password: "密码",
};

• 创建文件：i18n/en.js

export default {
  username: "username",
  password: "password",
};

• 创建文件：i18n/index.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import zh from "./zh";
import en from "./en";

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

i18n.use(initReactI18next).init({
  resources,
  fallbackLng: "zh",
  lng: "zh",
  debug: true,
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
});

export default i18n;

3. 在入口文件 index.js 中引用启用

import "./i18n";

4.使用

1. 类组件中使用：
   使用 withTranslation()高阶组价包裹容器组件。

import { withTranslation } from "react-i18next";

class HomeLayout extends Component {
  constructor(props) {
    super(props);
    this.t = props.t;
  }
  render() {
    return <div>{this.t("username")}</div>;
  }
}

export default withTranslation()(HomeLayout);

2. 函数组件中使用：

import { useTranslation } from 'react-i18next';

export default (props) => {
  const { t } = useTranslation();

  return {
    <div>{t('username')}</div>
  }
}

3. 切换语言
   i18n.language：获取当前环境语言
   i18n.changeLanguage()：切换语言

import i18n from "i18next";

switchLang = () => {
  const lang = i18n.language;
  if (lang === "zh") {
    i18n.changeLanguage("en");
  } else {
    i18n.changeLanguage("zh");
  }
};