react中英文切换一

最近项目需要添加中英文切换功能，涉及到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直接改变语言，这种当我们刷新时又会回到中文，显然不是我们想要的，当然，这里每次切换都会重新加载页面，给人感觉不是太好，大家又更好的方法还望不吝赐教

react中英文切换一相关推荐

react中英文切换三之谷歌地图中英文切换
<script>const url=localStorage.getItem('lang_type')==="zh_CN"?"//maps.google.cn ...
react中英文切换二
上一篇我们介绍了antd组件内部中英文切换问题,现在我们来看看antd外的中英文怎么切换. 这里我们主要用到了阿里的react-intl-universal插件,相信很多人百度也看到过雅虎的react ...
前端国际化之react中英文切换
文章目录 React国际化库推荐 react-intl-universal库使用介绍安装初始化调用切换进阶 React国际化库推荐在国际化React应用程序的情况下,react-intl库 ...
react国际化中英文切换
欢迎关注微信公众号:[ 全栈攻略 ] react项目需要支持国际化,推荐插件"react-intl-universal",原因是"react-intl"存在一些 ...
ae中英文切换_AE技巧，AE CC软件如何切换中英文版
平时使用,中文界面更容易操作,但有时候需要切换成英文版使用,那AE怎么切换中英文界面呢?今天就来跟大家讲解一下切换语言界面的方法. 中文界面固然看着熟悉,对于入门来说也是非常有利的.但是,我们在学习过 ...
jenkins页面中英文切换配置
jenkins中英文切换配置 Jenkins--英文切换成中文更新了一下jenkins的war包, 结果启动后成英文的了,后来百度出解决方案: 原文地址:https://blog.csdn.net/ ...
SpringBoot中英文切换/国际化——java后端怎么用预置文本的内容替换web网页内容（Resource Bundle）
文章目录创建预置文件文本内容 Thymeleaf修改前端使其获得预置文本内容 html页面设置跳转标签和传值创建一个MyLocaleResolver配置文件在MvcConfiguration中注 ...
中英文切换_王者荣耀：模拟战奖励一览，新增中英文切换，李白第二套星元来袭...
王者荣耀体验服在今日凌晨更新后新增了不少功能,比如模拟战加入了精灵机制,以及局内新增语言设置,另外李白继千年之狐后,又有一套皮肤加入"星计划",即李白团战精神皮肤敏锐之力将迎来星元 ...
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决？
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决? componentWillReceiveProps 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...

react中英文切换一

react中英文切换一相关推荐

最新文章

热门文章