react使用i18next实现国际化

一、简介

react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。

二、优点：

• 基于i18next不仅限于react，学一次就可以用在其它地方
• 提供多种组件在hoc、hook和class的情况下进行国际化操作
• 适合服务端的渲染
• 历史悠久，始于2011年比大多数的前端框架都要年长
• 因为历史悠久所以更成熟，目前还没有i18next解决不了的国际化问题
• 有许多插件的支持，比如可以用插件检测当前系统的语言环境，从服务器或者文件系统加载翻译资源

三、安装 

需要同时安装 i18next 和 react-i18next 依赖：

npm install react-i18next i18next --save
或
yarn add react-i18next i18next --save

安装检查当前浏览器语言插件

npm i i18next-browser-languagedetector --save

四、配置

在src下新建i18n文件夹，以存放国际化相关配置

i18n中分别新建三个文件（我在此处建了一个locales文件夹存放两个json）：

• i18n.js：对 i18n 进行初始化操作及插件配置
• en.json：英文语言配置文件
• zh.json：中文语言配置文件

i18n.js

import i18n from "i18next"
import enUsTrans from './locales/en.json'
import zhCnTrans from './locales/zh.json'
import {
  initReactI18next
} from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'; // 检测当前浏览器语言

i18n.use(LanguageDetector)
.use(initReactI18next)
.init({
  resources:{
    en:{
      translation:enUsTrans
    },
    zh:{
      translation:zhCnTrans
    }
  },
  lng:navigator.language,
  fallbackLng:"zh",
  debug:false,
  interpolation:{
    escapeValue:false
  }
})
export default i18n

一般json文件的key为英文，但考虑到后续项目易维护性，使用 t('首页') 中文模式更利于后续人员开发，故此处key定义为中文

en.json

{
    "学习React": "title",
       "home": {
        "hot_recommended": "Hot Recommended",
        "new_arrival": "New arrival",
        "joint_venture": "Joint Venture"
    }
}

zh.json

{
    "学习React": "学习React",
    "home": {
        "hot_recommended": "爆款推荐",
        "new_arrival": "新品上市",
        "joint_venture": "合作企业"
    }
}

五、使用

1. 引用配置文件 

在index.tsx中引用i18n的配置文件 ：import './i18n/i8n';

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n/i18n'; // 引用配置文件

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

2. 类组件 

在 类组件 中使用withTranslation 高阶函数(HOC) 来完成语言配置的数据注入

import React from 'react';
import styles from './Home.module.css';

// 引入HOC高阶函数withTranslation 和 i18n的ts类型定义WithTranslation 
import { withTranslation, WithTranslation } from "react-i18next"

class HomeComponent extends React.Component<WithTranslation> {
    render() {
        const { t } = this.props;
        return <>
           <h1>{t('header.home')}</h1>
           <ul>
               <li>{t('home.hot_recommended')}</li>
               <li>{t('home.new_arrival')}</li>
               <li>{t('home.joint_venture')}</li>
           </ul>
        </>
    }
}

export const Home = withTranslation()(HomeComponent); // 使用withTranslation高阶函数来完成语言配置的数据注入

3. Hook

在 函数式组件 中使用useTranslation 的 hook 来处理国际化

import React from 'react';
import { useTranslation, Trans } from 'react-i18next'

export const Home: React.FC = () => {
    const { t: translate } = useTranslation()
    return (
		<div>
			<h1>{translate('首页')}</h1>
			<ul>
				<li>{t('home.hot_recommended')}</li>
				{/* 还有一种方式 */}
				<li><Trans>home.new_arrival</Trans></li>
			</ul>
		</div>    
    );
};

 6. 切换语言

import i18n from './i18n/i18n';  // 引入自己建的文件i18n.js

const changeLanguage= (val) => {
	i18n.changeLanguage(val); // val入参值为'en'或'zh'
};

或

import React from 'react';
import { useTranslation } from 'react-i18next'

export const Home: React.FC = () => {
    const { t, i18n } = useTranslation()
    return (
		<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
    );
};