在 React 中使用 i18next支持多语言

吾娱生活2024-02-22 16:53

基本用法

安装依赖包

bash 复制代码

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

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

创建项目目录

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

封装配置插件

i18n.tsx代码

bash 复制代码

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/zh
    fallbackLng: 'en',
    interpolation: {
   	  // not needed for react as it escapes by default
      escapeValue: false,
    },
    resources: {
      en: {
      	// 这里是我们的翻译文本
        translation: enUsTrans
      },
      zh: {
        translation: zhCnTrans
      }
    }
  });

export default i18n;

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

bash 复制代码

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

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

bash 复制代码

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

在入口文件中引入插件

bash 复制代码

import './locales/i18n.tsx'

在组件中使用时

bash 复制代码

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

const Component = () => {
  const { t } = useTranslation();
  return (
    <div> 
        {t('Dashboard')} 
    </div>
  );
}

export default Component;