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

    @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>