安装第三方依赖库
npm install i18next -D
npm install react-i18next -D
编写语言文件
export const cn = {
lang: '简体中文',
login: {
code: '验证码',
username: '用户名',
password: '密码',
oldPassword: '原密码',
newPassword: '新密码',
confirmPassword: '确认密码'
},
message: {
remindUsername: '请输入用户名',
remindPassword: '请输入密码',
remindOldPassword: '请原输入密码',
remindNewPassword: '请输入新密码',
remindConfirmPassword: '请输入确认密码',
remindCode: '请输入验证码',
errorMenu: '获取用户菜单失败,请重试!',
loginError: '登陆失效,请重新登陆',
notNull: '不能为空',
delSuccess: '删除成功',
delError: '删除失败',
tryAgain: '请重试',
getError: '获取数据失败'
},
btn: {
login: '登陆',
forgotPassword: '忘记密码',
updatePassword: '修改密码',
search: '搜索',
del: '删除',
add: '新增',
close: '关闭',
reset: '清除搜索条件'
}
}
编写工具类引入并使用语言模块
i18n/index.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { en } from '../locales/en_US';
import { cn } from '../locales/zh_CN';
import { tw } from '../locales/zh_TW';
const resources = {
en: {
translation: en
},
cn: {
translation: cn
},
tw: {
translation: tw
}
}
i18n.use(initReactI18next)
.init({
resources,
lng: localStorage.language || 'cn',
fallbackLng:'cn',
interpolation: {
escapeValue: false,
}
});
export default i18n;
实现语言切换
需要使用到react-i18next种的withTranslation,这里通过注释的方法使用@withTranslation(),结合i18n种的changeLanguage方法实现,这里和使用react17版本的开发有区别,同时需要使用的localStorage来配合使用
代码如下
import { withTranslation } from 'react-i18next';
import i18n from '../../i18n/index'
@withTranslation()
class HeaderBar extends React.Component {
constructor(props) {
super(props)
this.state= {
defaultLanguage: localStorage.language || 'cn',
defaultValue: localStorage.language==='en'?'English':localStorage.language==='tw'?'繁體中文':'简体中文'
}
}
@autobind
changeLanguage(e) {
this.setState({
defaultLanguage: e
});
i18n.changeLanguage(e, function(v) {
localStorage.setItem('language', e);
});
}
render() {
<div>
...
<Select onChange={this.changeLanguage} style={{width: 100, color: '#FFFFFF'}}
defaultValue={this.state.defaultValue} bordered={false}>
<Option value="cn" style={{color: '#333333'}}>简体中文</Option>
<Option value="tw" style={{color: '#333333'}}>繁體中文</Option>
<Option value="en" style={{color: '#333333'}}>English</Option>
</Select>
...
</div>
}
}
如何引用
其实很简单,import i18n from '../../i18n/index',使用我们自己写的i18n的工具类
<span>{i18n.t('common.administration')}</span>
<div style={{height: 40, lineHeight: '40px', textAlign: 'left', fontSize: 16}}><span>{i18n.t('common.operate')}</span></div>