React 中使用 react-i18next 国际化

本文使用 React-i18next 库结合 React， 介绍如何在 React 中配置使用国际化。
官方地址：i18next | react-i18next

简介

react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用；
react-i18next 特点：

1. 提供多种组件可以在hoc, hook 和 class 的情况下进行国际化操作；
2. 基于 i18next 不仅限于react，学一次就可以用在其它地方；
3. 适合服务器的渲染；
4. 有许多插件的支持，比如可以用插件检测当前系统的语言环境，从服务器或者文件系统加载翻译资源；

安装与使用

安装

# npm
npm install react-i18next i18next --save
# 如果需要检测当前浏览器的语言或者从服务器获取配置资源可以安装下面依赖
npm install i18next-http-backend i18next-browser-languagedetector --save

准备

1. 新建一个 React 项目，安装依赖包；

   npm install react-i18next i18next --save
   

2. 新建文件 en.json 和 zh.json;
   • src\react-i18next\locales\en.json

     {
     	title: "Hello Word"
     }
     

   • src\react-i18next\locales\zh.json

     {
     	title: "你好 世界"
     }
     

3. 新建 resources.js 和 i18n.js;
   • src\react-i18next\locales\resources.js

     import ja from "./ja.json";
     import en from "./en.json";
     import zh from "./zh.json";
     
     export const resources = {
     	"ja": {
     		translation: ja
     	},
     	"en": {
     		translation: en
     	},
     	"zh": {
     		translation: zh
     	}
     }
     

   • src\react-i18next\i18n.js

     import i18n from 'i18next';
     import { initReactI18next } from 'react-i18next';
     import { resources } from './locales/resources';
     
     i18n
     	// 将 i18n 实例传递给 react-i18next
     	.use(initReactI18next)
     	// 初始化 i18next
     	// 所有配置选项: https://www.i18next.com/overview/configuration-options
     	.init({
     		resources,
     		fallbackLng: "zh",
     		lng: "zh",
     		debug: true,
     		interpolation: {
     			escapeValue: false, // not needed for react as it escapes by default
     		}
     	});
     
     export default i18n;
     

使用

1. 在程序入口引入 i118n;

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   import "./react-i18next/i18n";
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
   	<App />
     </React.StrictMode>
   );
   

2. 在 Hooks 中使用国际化；

   import { useTranslation } from "react-i18next";
   
   function App() {
     const { t } = useTranslation();
     return (
   	<div className="App">
   	  {t("title")}
   	</div>
     );
   }
   
   export default App;
   

3. 在 class 组件中使用国际化；

   import React from "react";
   import { withTranslation } from "react-i18next";
   
   class App extends React.Component {
   
     render() {
   	const { t } = this.props;
   	return (<div className="App">
   	  {t("title")}
   	</div>);
     }
   }
   
   export default withTranslation()(App);
   

检测当前浏览器语言国际化组件

1. 安装依赖

   npm install i18next-browser-languagedetector --save
   

2. 配置使用插件

   // src\react-i18next\i18n.js
   import i18n from 'i18next';
   import LanguageDetector from 'i18next-browser-languagedetector';
   import { initReactI18next } from 'react-i18next';
   import { resources } from './locales/resources';
   
   i18n
   	// 检测用户语言
   	// 操作文档: https://github.com/i18next/i18next-browser-languageDetector
   	.use(LanguageDetector)
   	// 将 i18n 实例传递给 react-i18next
   	.use(initReactI18next)
   	// 初始化 i18next
   	// 所有配置选项: https://www.i18next.com/overview/configuration-options
   	.init({
   		resources,
   		fallbackLng: "en",
   		lng: navigator.language,
   		debug: true,
   		interpolation: {
   			escapeValue: false, // not needed for react as it escapes by default
   		}
   	});
   
   export default i18n;
   

   上面代码，首先导入 LanguageDetector，其次 use(LanguageDetector), 使用插件，最终在 init 配置项里配置 lng: navigator.language, 至此切换浏览器语言国际化组件完成；

手动切换国际化语言

// class 组件
const { t, i18n } = this.props;
i18n.changeLanguage("en"); 		// 手动切换到英文

// Hooks 组件
const { t, i18n } = useTranslation();
i18n.changeLanguage("zh"); 		// 手动切换到中文

总结

i18next 是一款强大的国际化框架，react-i18next 是基于 i18next 适用于 React 的框架，另外 i18next 还和很多的前端框架可以结合，所以只需要学习一次，学习成本低；
本文介绍了 react-i18next 的基本用法，如果更特殊的需求，文章开头的官方地址可以找到答案；