react插件react-i18next的使用配置

如果项目要求使用双语甚至多语言，则需要做语言设置功能，react里用react插件react-118next做国际化语言适配的流程如下：（这里以中英双语举例）

初始化i18n

在src目录创建i18n文件夹，然后在新创建的文件夹新建i18n.js文件和locales文件夹，再在locales文件夹下面创建中英双语两种翻译文件：

\i18n
	\locales
		zh_CN.js
		en_US.js
	i18n.js

然后在翻译文件中初始化一些翻译内容

// \locales\en_US.js
export default {
  name: "NAME",
  outer: {
    inner: "INNER"
  },
  todos: {
    allCompleted: "All completed",
    allNotCompleted: "All not completed"
  }
};

// \locales\zh_CN.js
export default {
  name: "名字",
  outer: {
    inner: "里面的"
  },
  todos: {
    allCompleted: "全部已完成",
    allNotCompleted: "全部未完成"
  }
};

然后配置i18n.js文件

// \i18n.js
import i18n from "i18next";
import zh_CN from "./locales/zh_CN";
import en_US from "./locales/en_US";
import { initReactI18next } from "react-i18next";

export const zh = 'zh'
export const en = 'en'

i18n.use(initReactI18next).init({
  resources: {
    [en]: {
      translation: en_US
    },
    [zh]: {
      translation: zh_CN
    }
  },
  lng: en, // if you're using a language detector, do not define the lng option
  fallbackLng: en,

  interpolation: {
    escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
  }
});

这里是按照官方文档配置的。

使用

首先需要在入口文件引入i18n模块

import "./i18n/i18n"

然后在组件中使用（以函数式组件为例）

/* eslint-disable */
import { useCounter } from "../../hooks/index";
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { en, zh } from "../../i18n/i18n";
export default () => {
  const { t, i18n } = useTranslation();

  const [count, setCount] = useCounter();

  const setLang = () => {
    let lang = zh;
    if (i18n.language === zh) {
      lang = en;
    }
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <div>i18n{t("name") + " " + t("outer.inner")}</div>
      <Button onClick={setLang}>change</Button>
      <div>Counter: {count}</div>
      <Button onClick={setCount.add}>+</Button>
      <Button onClick={setCount.minus}>-</Button>
    </div>
  );
};

切换语言

如上面的代码中所示，react-i18next库提供的useTranslations这个hook调用会得到包含t方法和i18n对象的一个对象

使用i18n.language可以获取当前的语言，使用i18n.changeLanguage可以切换语言（参数就是i18n初始化的时候resources配置项这个对象的key值）