React.js+i18next实现国际化

本文主要是介绍React.js+i18next实现国际化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装第三方依赖库

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'?'繁體中文':'简体中文'}}  @autobindchangeLanguage(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>

这篇关于React.js+i18next实现国际化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---