React 结合 react-i18next 实现中英文切换

简介：

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

目录

简介：

  1.安装依赖

  2.文件配置

  3.引用配置文件

  4.在组件中使用

  5.切换语言

 1.安装依赖

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

 2.文件配置

在src下新建i18n文件夹，以存放国际化相关配置
i18n中分别新建三个文件：

• config.ts：对 i18n 进行初始化操作及插件配置

• en.json：英文语言配置文件

• zh.json：中文语言配置文件 

 以下是分别展示：

config.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translation_en from './en.json';
import translation_zh from './zh.json';

const resources = {
	en: {
		translation: translation_en,
	},
	zh: {
		translation: translation_zh,
	},
};

i18n.use(initReactI18next).init({
	resources,
	// 默认语言  zh/en  中文/英文
	lng: 'zh',
	interpolation: {
		escapeValue: false,
	},
});

export default i18n;

en.json 

//英文  en.json
{
	"article": "Article",
	"recommended_reading": "Recommended Reading",
	"tags": "Tags",
	"classify": "Article Classification"
}

zh.json 

//中文   zh.json
{
	"article": "文章",
	"recommended_reading": "推荐阅读",
	"tags": "文章标签",
	"classify": "文章分类"
}

3.引用配置文件

我们需要在index.tsx中进行引用 i18n 的配置文件 ：import './i18n/config';

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import './i18n/config'  // 引用配置文件
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
	<BrowserRouter>
			<App />
	</BrowserRouter>
);
reportWebVitals();

 4.在组件中使用

方法一：

在 类组件 中使用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('article')}</h1>
           <ul>
               <li>{t('tags')}</li>
               <li>{t('classify')}</li>
               <li>{t('recommended_reading')}</li>
           </ul>
        </>
    }
}

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

方法二：

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

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

export const Home: React.FC = () => {
    const { t } = useTranslation()
    return (
		<div>
			<h1>{t('article')}</h1>
			<ul>
				<li>{t('tags')}</li>
				<li>{t('classify')}</li>
				<li>{t('recommended_reading')}</li>
			</ul>
		</div>    
    );
};

5.切换语言

import i18n from 'i18next';

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

 或

import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Space } from 'antd';
import { useTranslation } from 'react-i18next'

export const Home: React.FC = () => {
    const { t, i18n } = useTranslation()
    const menu = (
		<Menu
			items={[
				{
					key: '1',
					label: (
						<p onClick={() => {i18n.changeLanguage('zh');}}>中文</p>
					),
				},
				{
					key: '2',
					label: (
						<p onClick={() => {i18n.changeLanguage('en');}}>英文</p>
					),
				},
			]}
		/>
	);
    return (
        <div>
             // 使用三元判断
 		     //<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}> 
             //     {i18n.language=='en'?'zh':'en'}
             //</button>
             // 或下拉框形式呈现
          	<Dropdown overlay={menu}>
				<a onClick={(e) => e.preventDefault()}>
					<Space>
					  点我
					  <DownOutlined />
					</Space>
				</a>
			</Dropdown>
        </div>
    );
};