最近公司为了跟上时代潮流，要求我把之前的项目都进行国际化，实现中英文双语言切换功能，然后我只能连夜调研各大国际化组件，最终选择了这个react-intl-universal，它相比于 react-intl、react-i18next最大的亮点就是支持在js中使用，并且配置简单，提供的API也简单好用。

npm安装：

npm install react-intl-universal --save

一、编写配置文件

目录结构：

emit.js（获取EventEmitter实例，用于注册监听器，在项目中主动修改语言版本）:

const EventEmitter = require('events').EventEmitter; 
const emit = new EventEmitter(); 
export { emit };

en-US.json:

{
    "userSetting": "setting",
    "language": "English",
    "changeSkin": "change skin",
    "usageFeedback": "usage feedback"
}

zh-CN.json:

{
    "userSetting": "设置",
    "language": "中文",
    "changeSkin": "切换皮肤",
    "usageFeedback": "使用反馈"
}

二、初始化intl

我们在创建好配置文件后，下一步就需要在项目入口文件app.js中进行初始化。首先我们需要引入以下几个文件：

import intl from 'react-intl-universal';
import {emit} from "../locales/emit";

const locales = {
  'en_US': require('../locales/en-US.json'),
  'zh_CN': require('../locales/zh-CN.json'),
};

然后在componentWillMount生命周期里进行初始化：

componentWillMount() {
    //语言初始化
    emit.on('change_language', lang => this.loadLocales(lang)); // 监听语言改变事件
    this.loadLocales(); // 初始化语言
}

loadLocales = (lang = "zh_CN") => {
    intl.init({
        currentLocale: lang,  // 设置初始语言
        locales
    })
}    

到这步准备工作已经做完了，接下来就可以在项目中进行使用了。

三、intl的使用

在项目显示文字的地方，利用intl.get("key")方法替换文字显示，key就是在之前配置时，en-US.json和zh-CN.json文件中所设置的相对应的键。

<Tooltip
   placement="bottomLeft"
   title={
      <ul className="setting_list">
         <li onClick={this.changeLanguage}>
            <i className="language"></i>
            {intl.get("language")}
         </li>
         <li onClick={this.changeSkin}>
            <i className="skin"></i>
            {intl.get("changeSkin")}
         </li>
         <li>
            <i className="use"></i>
            {intl.get("usageFeedback")}
         </li>
      </ul>
    }
    overlayClassName="setting_tooltip"
>
   <div className={`setting ${className}`}>{intl.get('userSetting')}</div>
</Tooltip>

中文效果：

英文效果：

 

 实现切换语言版本功能：

changeLanguage = () => {
   let {
      currentLang
   } = this.state;
   let val = currentLang === "zh_CN"? "en_US": "zh_CN";
   emit.emit('change_language', val);
   this.setState({
       currentLang: val
   })
}    

 大功告成！

知识点总结：

1、EventEmitter对象

EventEmitter 的核心就是事件触发与事件监听器功能的封装

使用：
var events = require('events'); 
var emitter = new events.EventEmitter(); 

 

2、react-intl-universal相关api

（1）inrl.get("key",  obj)

key： 则是在json文件中设置的键

obj：obj中可以设置参数，key对应的值当中也可以设置变量，obj中设置的参数就能将变量转化为相对应语言文字

示例：

//配置
{
    "myWorld": "my world",
    "test": "hello {userName}, welcome to {myWorld}！"
}

{
    "myWorld": "我的世界",
    "test": "哈喽 {userName}, 欢迎来到{myWorld}！"
}

//调用
intl.get("test", { userName: "不吃西红柿", myWorld: intl.get("myWorld")})

 

 

（2）设置html

格式：intl.getHTML(key,  obj)

{
    "myWorld": "my world",
    "test": "hello <span style='color: red'>{userName}</span>, welcome to {myWorld}！"
}


intl.getHTML("test", { userName: "不吃西红柿", myWorld: intl.get("myWorld")})