react中英文切换二

上一篇我们介绍了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中使用。

就这样了，若有不对的地方还望指出，以便及时纠正

react中英文切换二

猜你喜欢