本文主要是介绍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'}}> {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'}}/>
{intl.get(username)}
</span>
</div>
</Dropdown>
: <div className='avatar-wrapper'><a href='../#/home' style={{'color': 'white'}}>登录</a></div>
}
</Layout.Header>
)
}
我的大部分主要的代码就在这里了，关于其他的问题，官网给的例子就能解决了。
以上呢就是我个人实际做项目的时候遇到的问题并做了下记录，希望能给跟我一样第一次做react国际化的人一些小建议～如有问题欢迎指正～
这篇关于react项目从无到有 做国际化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
