react项目从无到有 做国际化

2023-11-05 05:18

本文主要是介绍react项目从无到有 做国际化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

公司之前只是用react做了一个系统,但是后来说要做国际化,要做英文版,当时这个任务交给我的时候真头大,因为vue国际化还好做点,这个react做国际化,还我一个人完全,真是有点懵。后来开始各种搜索记录,完善,最后终于在自己的努力下完成了这个工作。下面是记录的一些要点,都是实际工作中遇到的。在此记录一下,同时也跟其他跟我一样最开始做react项目的小伙伴一个不是建议的的建议吧。

首先,我用的是react-intl-universal框架,它的github地址地址是这个:https://github.com/alibaba/react-intl-universal

在这个上面有个官方的小例子,可以先下载下来看看是如何使用的。

其次,拿到这个小例子以后自己去看下这个例子的入口文件是怎么设置的,与此同时找到你的项目的入口文件,对其例子中的代码有针对性的进行改造。看自己项目实际需要进行修改。关于切换语言的样式,看自己实际需要进行修改。因为我是两个项目串行的,可理解为从A项目跳转到B项目,因为要求两个项目的切换样式保持的是一样的,所以我的项目是这个样式的。见图如下:

这个样式的话,因人而异,因项目而异,看实际项目的需要。

下面来说下,我改国际化项目中一些我觉得关键的点:

首先,项目默认是中文的网站,在点击切换后即可更换成英文的网站。注意,一般情况下是中文有一个js文件,比如cn.js;英文有一个js,比如en.js,要记得将这两个文件引入,这样后面才能找到对应的中英文。

其次,我觉得是很重要的一个问题,就是切换语言的时候要及时更新页面的文案,比如中文时是中文,英文时是英文。我开始遇到一个问题就是,在a页面点击了切换语言,但是a页面的表格的表头还会是中文的,不会及时变成英文,这时点击其他有表格的页面查看效果发现表头是英文的。就是在该页面切换的时候不会及时更新。英文切换成中文也是一样的问题。这个问题我觉得特别棘手,因为实际项目结构肯定会稍稍复杂些,并且这个项目初始不是我搭建的,搭建的人当时已经离职了,呵呵呵呵呵呵呵呵呵呵~。然后最后经过千辛万苦,终于解决了这个问题,解决了一大块心病!!!解决方法就是:设置一个flag值来重新渲染页面,为true时重新渲染页面,关于这个flag叫什么名字随便你,比如我起的名字是initDone,我先默认这个这个值为false,切换语言时,来更换这个initDone的值,与此同时,渲染页面时要注意判断这个initDone的值,是true的情况来渲染。

下面我简单复制粘贴一下我的部分代码:

---------1----------

constructor (props) {

super(props)

this.state = {

initDone: false

}

}

componentDidMount () {

this.loadLocales()

}

--------2--------

loadLocales () {

this.handleLan().then(() => {

this.setState({ initDone: true })

this.props.getDone(this.state.initDone)

})

}

---------3-----------

handleLan () {

let currentLocale = localStorage.getItem('lang') || intl.determineLocale({

urlLocaleKey: 'lang',

cookieLocaleKey: 'lang'

})

if (currentLocale === 'zh-CN') {

localStorage.setItem('mylang', 'CN')

} else {

localStorage.setItem('mylang', currentLocale)

}

if (!_.find(SUPPOER_LOCALES, { value: currentLocale })) {

currentLocale = 'EN'

}

if (currentLocale === 'EN') {

console.log('if判断,', currentLocale)

return intl.init({

currentLocale,

locales: {

[currentLocale]: myen

}

})

} else {

console.log('else判断', currentLocale)

return intl.init({

currentLocale,

locales: {

[currentLocale]: myzh

}

})

}

}

-------4---------

render () {

return (

this.state.initDone &&

<Layout.Header className="mheader"> 这个是页面布局

<div className="logo">

{intl.get('systemname')}

</div>

<Menu theme="default"

mode="horizontal"

className="munu-wrap"

selectedKeys={[activeTab]}

defaultSelectedKeys={[activeTab]}>

{

headerTabConfig.map(menu => this.renderMenu(menu))

}

</Menu>

<div className='lang_div'>这个地方是国际化切换的样式

<span onClick={this.handleLangCommand.bind(this, 'CN')}>中文</span>/<span onClick={this.handleLangCommand.bind(this, 'EN')}>EN</span>

</div>

<div className='avatar-wrapper'>

<Link to={'/userCenter/message'}>

<img src={news} alt="" style={{width: '14px', height: '12.9px'}}/>

{

notReadMessage

? <span className="not-read">{notReadMessage}</span>

: null

}

<span style={{color: '#fff'}}>&nbsp;&nbsp;{intl.get('menuinfo')}</span>

</Link>

</div>

{

this.props.homeStore.isLogin

? <Dropdown overlay={menuEle} placement="bottomRight">

<div className='avatar-wrapper'>

<span style={{cursor: 'pointer'}}>

<img src={admin} alt="" style={{width: '14px'}}/>

&nbsp;&nbsp;{intl.get(username)}

</span>

</div>

</Dropdown>

: <div className='avatar-wrapper'><a href='../#/home' style={{'color': 'white'}}>登录</a></div>

}

</Layout.Header>

)

}

 

我的大部分主要的代码就在这里了,关于其他的问题,官网给的例子就能解决了。

以上呢就是我个人实际做项目的时候遇到的问题并做了下记录,希望能给跟我一样第一次做react国际化的人一些小建议~如有问题欢迎指正~

这篇关于react项目从无到有 做国际化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/347657

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

eclipse如何运行springboot项目

《eclipse如何运行springboot项目》:本文主要介绍eclipse如何运行springboot项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目js录当在eclipse启动spring boot项目时出现问题解决办法1.通过cmd命令行2.在ecl

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器(Interceptor)是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实

Maven项目打包时添加本地Jar包的操作步骤

《Maven项目打包时添加本地Jar包的操作步骤》在Maven项目开发中,我们经常会遇到需要引入本地Jar包的场景,比如使用未发布到中央仓库的第三方库或者处理版本冲突的依赖项,本文将详细介绍如何通过M... 目录一、适用场景说明​二、核心操作命令​1. 命令格式解析​2. 实战案例演示​三、项目配置步骤​1

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体(数据库的定义)2.预加载preload3.添加关联的方法一、动态路由1

Spring 缓存在项目中的使用详解

《Spring缓存在项目中的使用详解》Spring缓存机制,Cache接口为缓存的组件规范定义,包扩缓存的各种操作(添加缓存、删除缓存、修改缓存等),本文给大家介绍Spring缓存在项目中的使用... 目录1.Spring 缓存机制介绍2.Spring 缓存用到的概念Ⅰ.两个接口Ⅱ.三个注解(方法层次)Ⅲ.

一文教你Java如何快速构建项目骨架

《一文教你Java如何快速构建项目骨架》在Java项目开发过程中,构建项目骨架是一项繁琐但又基础重要的工作,Java领域有许多代码生成工具可以帮助我们快速完成这一任务,下面就跟随小编一起来了解下... 目录一、代码生成工具概述常用 Java 代码生成工具简介代码生成工具的优势二、使用 MyBATis Gen

springboot项目redis缓存异常实战案例详解(提供解决方案)

《springboot项目redis缓存异常实战案例详解(提供解决方案)》redis基本上是高并发场景上会用到的一个高性能的key-value数据库,属于nosql类型,一般用作于缓存,一般是结合数据... 目录缓存异常实践案例缓存穿透问题缓存击穿问题(其中也解决了穿透问题)完整代码缓存异常实践案例Red