在 React 中使用 i18next支持多语言

基本用法

安装依赖包

npm i i18next react-i18next i18next-browser-languagedetector --save

i18next 提供了翻译的基本能力;
react-i18next 是 i18next 的一个插件，用来降低 react 的使用成本;
i18next-browser-languagedetector 是用来检测浏览器语言的插件。

创建项目目录

在项目入口文件同级，创建如下目录和文件
多语言文件目录

封装配置插件

i18n.tsx代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import enUsTrans from './en-us.json'
import zhCnTrans from './zh-cn.json'i18n// 检测用户当前使用的语言// 文档: https://github.com/i18next/i18next-browser-languageDetector.use(LanguageDetector)// 注入 react-i18next 实例.use(initReactI18next)// 初始化 i18next// 配置参数的文档: https://www.i18next.com/overview/configuration-options.init({debug: true,// supportedLngs: ['zh', 'en'],//选择默认语言，选择内容为上述配置中的key，即en/zhfallbackLng: 'en',interpolation: {// not needed for react as it escapes by defaultescapeValue: false,},resources: {en: {// 这里是我们的翻译文本translation: enUsTrans},zh: {translation: zhCnTrans}}});export default i18n;

en-us.json是经过专业人士的翻译JSON文件，列举部分代码

{ "Dashboard": "Dashboard","Guide": "Guide","FAQ": "FAQ",...
}

zh-cn.json是对应的中文JSON文件，列举部分代码

{ "Dashboard": "看板","Guide": "操作指南","FAQ": "常见问题",...
}

在入口文件中引入插件

import './locales/i18n.tsx'

在组件中使用时

import { useTranslation, Trans } from 'react-i18next';const Component = () => {const { t } = useTranslation();return (<div> {t('Dashboard')} </div>);
}export default Component;