react-i18next的使用

公司項(xiàng)目使用react做的狞玛，現(xiàn)在需要添加多語言昼丑，于是上網(wǎng)上搜到了react-i18next庫，看了一些關(guān)于這個(gè)庫的使用方法的文章簿废，然而始終沒有弄明白空入，于是決定仔細(xì)閱讀文檔，最終弄明白了使用方法族檬，在這里記載一下歪赢。
首先看官方文檔的快速開始，按照文檔一步一步走单料，首先安裝包埋凯。

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

定義語言文件,類似于這樣的文件

// common.js
// 公用的文本
export default {
 loading: '正在加載...',
  服務(wù)器連接異常: '服務(wù)器連接異常',
  請(qǐng)輸入手機(jī)號(hào): '請(qǐng)輸入手機(jī)號(hào)',
  手機(jī)號(hào)格式不正確: '手機(jī)號(hào)格式不正確',
  notParse: '手機(jī)號(hào)碼錯(cuò)誤，無法解析該手機(jī)號(hào)',
  請(qǐng)先進(jìn)行驗(yàn)證: '請(qǐng)先進(jìn)行驗(yàn)證',
  請(qǐng)輸入密碼: '請(qǐng)輸入密碼',
  兩次密碼輸入不一致: '兩次密碼輸入不一致',
  請(qǐng)輸入短信驗(yàn)證碼: '請(qǐng)輸入短信驗(yàn)證碼',
  請(qǐng)輸入新密碼: '請(qǐng)輸入新密碼',
  passwordFormatError: '請(qǐng)輸入6-16位密碼',
  請(qǐng)?jiān)俅屋斎朊艽a: '請(qǐng)?jiān)俅屋斎朊艽a',
};

然后在你的react項(xiàng)目中的index.js文件同一級(jí)下創(chuàng)建一個(gè) 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, // 注冊(cè)登錄
    },
    menu: {// 這是namespace的名稱
      ...zh_CNMenu, // 左側(cè)菜單
    },
  },
  zh_TW: {
    common: {// 這是namespace的名稱
      ...zh_TWCommon, // 公共部分
      ...zh_TWProfile, // 注冊(cè)登錄
    },
    menu: {// 這是namespace的名稱
       ...zh_TWMenu, // 左側(cè)菜單
    },
  },
};

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;

然后我們?cè)谖覀兊?code>index.js中導(dǎo)入i18n.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './i18n'; // 在這里導(dǎo)入 i18n.js
import App from './App';

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

這樣react-i18next就在項(xiàng)目中配置完成了扫尖，當(dāng)然i18n.js文件中還有一些其他的參數(shù)可以配置白对，這里由于項(xiàng)目緊急我沒有做過多的研究，有興趣的同學(xué)可以深入研究一下换怖，接下來我們看如何在頁面中去使用甩恼。
我們?cè)谖覀兊捻撁嬷惺褂梅绞接?種：

第1種是使用hook函數(shù)
這種方法只能適用于函數(shù)式組件，由于本人項(xiàng)目中都是用的類組件沉颂，這里放一個(gè)官網(wǎng)的例子条摸。

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）
這應(yīng)該是最常用的方法，我在項(xiàng)目中也都是使用的這種方法铸屉，react-i18next 內(nèi)部封裝了一個(gè)高階組件withTranslation,我們需要利用這個(gè)高階組件把我們自己的組件包裝一次

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

這樣包裝之后我們就能在this.props上拿到一個(gè)t函數(shù)和一個(gè)i18n對(duì)象钉蒲，我們?cè)谛枰M(jìn)行多語言處理的地方用t函數(shù)進(jìn)行翻譯,t函數(shù)的參數(shù)是我們語言文件的key，這里的key可以是中文抬探。

<Modal
    visible={visible}
    title={t('請(qǐng)驗(yàn)證')}
    footer={null}
  >
    <div className={loading ? '' : style.hide}>{t('loading')}</div>
  </Modal>

有時(shí)候我們可能需要加載不同的命名空間下的語言文件子巾，我們使用高階組件withTranslation包裝組件的時(shí)候就需要加載我們需要用到的命名空間

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

使用的時(shí)候我們

<Modal
    visible={visible}
    title={t(請(qǐng)驗(yàn)證')}
    footer={null}
  >
    <div>{t('pageA':頁面A')}</div>
  </Modal>

如果t函數(shù)指定命名空間就使用指定命名空間下的語言，如果沒有指定使用第一個(gè)命名空間的語言小压，這里是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>
}