react-i18next的使用

公司项目使用react做的，现在需要添加多语言，于是上网上搜到了react-i18next库，看了一些关于这个库的使用方法的文章，然而始终没有弄明白，于是决定仔细阅读文档，最终弄明白了使用方法，在这里记载一下。
首先看官方文档的 快速开始，按照文档一步一步走，首先安装包。

npm install react-i18next i18next --save
// 或者
yarn add react-i18next i18next

定义语言文件,类似于这样的文件

// common.js
// 公用的文本
export default {
 loading: '正在加載...',
  服务器连接异常: '服務器連接異常',
  请输入手机号: '请输入手機號',
  手机号格式不正确: '手機號格式不正確',
  notParse: '手機號碼錯誤，無法解析該手機號',
  请先进行验证: '請先進行驗證',
  请输入密码: '請輸入密碼',
  两次密码输入不一致: '兩次密碼輸入不一致',
  请输入短信验证码: '請輸入短信驗證碼',
  请输入新密码: '請輸入新密碼',
  passwordFormatError: '請輸入6-16位密碼',
  请再次输入密码: '請再次輸入密碼',
};

然后在你的react项目中的index.js文件同一级下创建一个 i18n.js

//i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLanguage } from './common/utils';
import zh_CNCommon from './locales/zh_CN/common';
import zh_CNMenu from './locales/zh_CN/menu';
import zh_CNProfile from './locales/zh_CN/profile';

import zh_TWCommon from './locales/zh_TW/common';
import zh_TWMenu from './locales/zh_TW/menu';
import zh_TWProfile from './locales/zh_TW/profile';

const resources = {
  zh_CN: {
    common: {// 这是namespace的名称
      ...zh_CNCommon, // 公共部分
      ...zh_CNProfile, // 注册登录
    },
    menu: {// 这是namespace的名称
      ...zh_CNMenu, // 左侧菜单
    },
  },
  zh_TW: {
    common: {// 这是namespace的名称
      ...zh_TWCommon, // 公共部分
      ...zh_TWProfile, // 注册登录
    },
    menu: {// 这是namespace的名称
       ...zh_TWMenu, // 左侧菜单
    },
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: getLanguage(),

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

然后我们在我们的index.js中导入i18n.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './i18n'; // 在这里导入 i18n.js
import App from './App';

// append app to dom
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

这样react-i18next就在项目中配置完成了，当然i18n.js文件中还有一些其他的参数可以配置，这里由于项目紧急我没有做过多的研究，有兴趣的同学可以深入研究一下，接下来我们看如何在页面中去使用。
我们在我们的页面中使用方式有4种：

• 第1种是使用hook函数
  这种方法只能适用于函数式组件，由于本人项目中都是用的类组件，这里放一个官网的例子。

import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <h1>{t('Welcome to React')}</h1>
}

• 第2种是使用高阶组件（HOC）
  这应该是最常用的方法，我在项目中也都是使用的这种方法，react-i18next 内部封装了一个高阶组件withTranslation,我们需要利用这个高阶组件把我们自己的组件包装一次

import { withTranslation } from 'react-i18next';
// ...省略若干行
@withTranslation()
class Reset extends React.Component {
// ...省略若干行
}

这样包装之后我们就能在this.props上拿到一个t函数和一个i18n对象，我们在需要进行多语言处理的地方用t函数进行翻译,t函数的参数是我们语言文件的key，这里的key可以是中文。

<Modal
    visible={visible}
    title={t('请验证')}
    footer={null}
  >
    <div className={loading ? '' : style.hide}>{t('loading')}</div>
  </Modal>

有时候我们可能需要加载不同的命名空间下的语言文件，我们使用高阶组件withTranslation包装组件的时候就需要加载我们需要用到的命名空间

@withTranslation(['common', 'pageA']) // 加载common和pageA语言文件

使用的时候我们

<Modal
    visible={visible}
    title={t(请验证')}
    footer={null}
  >
    <div>{t('pageA':页面A')}</div>
  </Modal>

如果t函数指定命名空间就使用指定命名空间下的语言，如果没有指定使用第一个命名空间的语言，这里是common。

• 第3种是使用Translation

import { Translation } from 'react-i18next';
export default function MyComponent () {
  return (
    <Translation>
      {
        t => <h1>{t('Welcome to React')}</h1>
      }
    </Translation>
  )
}

• 第4种是使用Trans组件

import { Trans } from 'react-i18next';

export default function MyComponent () {
  return <Trans><H1>Welcome to React</H1></Trans>
}