公司項目使用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>
}
