react-intl-universal实现中英文语言切换（国际化）

最近公司为了跟上时代潮流，要求我把之前的项目都进行国际化，实现中英文双语言切换功能，然后我只能连夜调研各大国际化组件，最终选择了这个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文件中所设置的相对应的键。

<Tooltipplacement="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")})