上一篇我们介绍了antd组件内部中英文切换问题,现在我们来看看antd外的中英文怎么切换。
这里我们主要用到了阿里的react-intl-universal插件,相信很多人百度也看到过雅虎的react-intl插件,我最开始也是用的这个,用着用着发现并不能很好的满足我的需求,react-intl只能用在组件上,而当我要处理js中的文字时,比如echarts、highcharts之类的图表时,会要再配置文件里使用一些文字,react-intl就无能为力了,于是我找到了更强大,更简单的react-intl-universal。
首先yarn安装yarn add react-intl-universal,当然npm也行,然后引入
import intl from 'react-intl-universal';
import EN from '../language/EN.json'
import CH from '../language/CH.json'
const locales = {
"en_US": EN,
"zh_CN": CH,
};
这里EN和CH两个json文件是我们自己新建的文件,用于存放切换时要改变的文字的变量,然后定义一个初始化函数
langType = (type) =>{
localStorage.setItem('lang_type',type);
window.location.reload()
}//这个再上一篇文章已经用到过
loadLocales=()=> {
// init method will load CLDR locale data according to currentLocale
// react-intl-universal is singleton, so you should init it only once in your app
intl.init({
currentLocale: localStorage.getItem('lang_type')||'zh_CN', // TODO: determine locale here
locales,
})
.then(() => {
// After loading CLDR locale data, start to render
this.setState({initDone: true});
});
};
componentDidMount() {
this.loadLocales();
}
上面代码中的langType前篇文章已经说明了,就是点击切换按钮触发的函数,然后我们调用了react-intl-universal的intl()方法来初始化我们要加载的语言,intl接受两个参数,第一个currentlocale,值为我们上面定义locales对象里的属性'en_US'或'zh_CN',我们localStorage.getItem('lang_type')获取到的值就是'en_US'或'zh_CN',intl返回promise对象,所以我们可以调用.then()来做初始化成功后的逻辑,我们改变了initDone的值,所以我们要再state定义一个initDone,并给默认值为false,我们根据这个initDone来确定是否开始加载页面
render(){
return(
this.state.initDone && <App/>
)
}
最后就是使用了,json里定义变量
CH.json
{
"lang":"语言"
}
EN.json
{
"lang":"language"
}
调用
<div>{intl.get("lang")}</div>
当然,也可以事用变量,html等,这里就不一一介绍了,想了解更多,可以到github查看教程,本文主要是介绍如何再react中使用。
就这样了,若有不对的地方还望指出,以便及时纠正