react中英文切换一[通俗易懂]

大家好，欢迎来到IT知识分享网。

最近项目需要添加中英文切换功能，涉及到antd组件内部中英文、谷歌地图中英文、以及网站上文字的中英文切换。我将分三篇文章依次介绍，今天先讲讲antd内部组件的切换。

首先头部引入

import {LocaleProvider } from 'antd';
import en_US from 'antd/lib/locale-provider/en_US';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn'; //不加这个切换中文时，日期组件年是中文，月是英文。。。。

然后定义一个state存放，并给一个默认值，并在项目外面套一个LocaleProcider

constructor (props) {
        super(props);
        this.state = {
            lang_type:localStorage.getItem('lang_type')==='zh_CN'? zh_CN : en_US||zh_CN
        }
    }



render(){
return (
<LocaleProvider locale={this.state.lang_type}>
        <App/>    
 </LocaleProvider>
)
}

这里根据存的localStorage运用三元运算改变this.state.lang_type的值，

最后就是定义和使用点击切换函数

    langType = (type) =>{
        localStorage.setItem('lang_type',type);
        window.location.reload() //点击后刷新，这样state里的代码会再次执行，从而达到切换效果
    }


<span onClick={()=>this.lang_type("zh_CN")}>中文</span> | <span  onClick={()=>this.lang_type("en_US")}>英文</span>

这里用localStroage存主要是为了关闭浏览器后打开记住以前切换的，如果想关闭浏览器再打开时始终回到中文，可以用sessionStorage来替代localStorage,官网的离职用的时this.setState直接改变语言，这种当我们刷新时又会回到中文，显然不是我们想要的，当然，这里每次切换都会重新加载页面，给人感觉不是太好，大家又更好的方法还望不吝赐教