react 如何使用 i18n

安装依赖

在React项目中引入i18n功能需要安装react-i18next和i18next库。通过npm或yarn添加依赖：

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

初始化配置

创建i18n配置文件（通常命名为i18n.js或i18n.ts），初始化i18next实例并配置语言资源：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: "Welcome",
        buttonText: "Click me"
      }
    },
    zh: {
      translation: {
        welcome: "欢迎",
        buttonText: "点击我"
      }
    }
  },
  lng: 'en', // 默认语言
  fallbackLng: 'en', // 回退语言
  interpolation: {
    escapeValue: false // React已处理XSS防护
  }
});

export default i18n;

在组件中使用

通过useTranslation钩子或withTranslation高阶组件访问翻译内容：

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

function MyComponent() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('zh')}>{t('buttonText')}</button>
    </div>
  );
}

动态加载语言包

对于大型项目，建议按需加载语言文件以避免初始包过大：

// i18n.js配置修改
i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json' // 从public/locales加载
  }
});

命名空间管理

通过命名空间分割大型翻译文件：

// 配置多个命名空间
resources: {
  en: {
    common: { /* 通用翻译 */ },
    dashboard: { /* 仪表盘相关 */ }
  }
}

// 组件中使用指定命名空间
const { t } = useTranslation('dashboard');

类型安全（TypeScript）

为翻译键提供类型定义：

declare module 'react-i18next' {
  interface CustomTypeOptions {
    resources: {
      translation: typeof enTranslations;
    };
  }
}