React国际化，基于react-i18next

React国际化，基于react-i18next

最近接到一个新的任务，一个项目需要集成到已有项目，并且要做国际化。国际化可以使web站点或者app在不同的国家或者地区使用。可以国际化的内容有文本，日期、时间和数字的格式，还有货币等。本文主要以文本国际化来介绍react-i18next。我刚开始以为国际化就是全片幅的翻译，以为要借助百度翻译那样的工具，后来知道只是把特定的内容翻译出来而已。

介绍

react-i18next是基于i18next的一款强大的国际化框架，可以用于react和react-native应用，以下是react-i18next一些特点：

1. 基于i18next不仅限于react，学一次就可以用在其它地方
2. 提供多种组件在hoc、hook和class的情况下进行国际化操作
3. 适合服务端的渲染
4. 历史悠久，始于2011年比大多数的前端框架都要年长
5. 因为历史悠久所以更成熟，目前还没有i18next解决不了的国际化问题
6. 有许多插件的支持，比如可以用插件检测当前系统的语言环境，从服务器或者文件系统加载翻译资源

准备开始

1.安装依赖

# npm
$ npm install react-i18next i18next --save
# 如果需要检测当前浏览器的语言或者从服务器获取配置资源可以安装下面依赖（本例简单演示不需要）
$ npm install i18next-http-backend i18next-browser-languagedetector --save

2.新建locales目录并添加多语言配置文件，文件类型为json
目录结构

locales表示做国际化这块的内容，json文件是不同语言的配置，resources.js将所有的json文件整合，详细如下：

#en.json
{
    "欢迎使用 react-i18next": "Welcome to react using react-i18next",
    "切换语言": "change language",
    "切换到中文": "change to Chinese",
    "切换到英文": "change to English",
    "切换到日文": "change to Japenese",
    "methods": {
        "renderProps": "change language with render props",
        "hook": "change language with hook",
        "hoc": "change language with hoc"
 }

#ja.json
{
    "欢迎使用 react-i18next": "ご利用を歓迎する react-i18next",
    "切换语言": "言語を切り替える",
    "切换到中文": "中国語に切り替える",
    "切换到英文": "英文に切り替える",
    "切换到日文": "日本語に切り替える",
    "methods": {
        "renderProps": "renderProps方式で言語を変換する",
        "hook": "hook方式で言語を変換する",
        "hoc": "hoc方式で言語を変換する"
    }
}

#zh.json
{
    "methods": {
        "renderProps": "用renderProps转换",
        "hook": "用hook转换",
        "hoc": "用hoc转换"
    }
}

#resources.js
import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

export const resources = {
	"ja": {
		translation: ja
	},
	"en": {
		translation: en
	},
	"zh": {
		translation: zh
	}
}

3.初始化配置，新建i18n.js文件，对i18n进行初始化操作及插件配置

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';
// 检测当前浏览器的语言
// import Backend from 'i18next-http-backend';
// 从服务器获取配置资源
// import LanguageDetector from 'i18next-browser-languagedetector';
// import resources from './locales/resources'
i18n
  // .use(Backend)
  // .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'zh',
    lng: 'zh',
    debug: true,
    resources: resources,
    interpolation: {
      escapeValue: false, 
    }
  });

export default i18n;

4.将i18n.js文件引入到入口文件中App.js

import React from 'react';
import i18n from './i18n'

export default class App extends React.Component {

    render() {
        return (
            <div>
                {/* 省略...... */}
            </div>
        )
    }
}

5.切换语言

   <button onClick={() => i18n.changeLanguage('zh')}>{t('切换到中文')}</button>
   <button onClick={() => i18n.changeLanguage('en')}>{t('切换到英文')}</button>
   <button onClick={() => i18n.changeLanguage('ja')}>{t('切换到日文')}</button>

6.通过RenderProps的方式国际化组件，本例app.js中。

import './App.css';
import React, { Component } from 'react'
import i18n from './i18n'
// import './i18n';
import { Translation } from 'react-i18next';
// import { withTranslation } from "react-i18next";
 export default class App extends Component {
  render() {
    return (
    <Translation>
   {
                t => {
                    return (
                        <div style={{background: 'red', margin: 20, color: 'white', width: 1000,height:600}}>
                            {t('methods.renderProps')}
                            <h1>{t('欢迎使用 react-i18next')}</h1>
                             <button onClick={() => i18n.changeLanguage('zh')}>{t('切换到中文')}</button>
                             <button onClick={() => i18n.changeLanguage('en')}>{t('切换到英文')}</button>
                             <button onClick={() => i18n.changeLanguage('ja')}>{t('切换到日文')}</button>
                        </div>
                    );
                }
            }
 </Translation>
  }
}

7.在hook中使用react-i18next国际化

import React from 'react';
import { useTranslation } from 'react-i18next';

const Index = () => {
    const { t } = useTranslation();
    return (
        <div style={{ background: 'yellow', margin: 20, width: 200 }}>
            {t('methods.hook')}
        </div>
    )
}

export default Index;

8.使用高阶组件（Hoc）的方式处理国际化

import React from 'react';
import { withTranslation } from 'react-i18next';

const Index = ({ t }) => {
  return (
    <div style={{ background: 'blue', margin: 20, color: 'white', width: 200 }}>
      {t('methods.hoc')}
    </div>
  );
}

export default withTranslation()(Index);

参考文档

https://www.jianshu.com/p/2f8d6e0b4adb