公司之前只是用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國際化的人一些小建議～如有問題歡迎指正～