react-i18next

特点

• 无缝集成：与 i18next 完全兼容，支持所有 i18next 的特性和插件。
• 简化的国际化流程：通过 React 的 Context API 和 Hooks 进行状态管理和翻译，使国际化变得更加直观。
• 高性能：通过优化的 re-render 机制，确保翻译在应用中的高效执行。
• 强大的钩子和组件：提供 useTranslation 钩子和 Trans 组件，简化翻译文本的使用和模板化。
• SSR 支持：支持服务器端渲染 (SSR)，适用于 Next.js 等框架。

使用场景

• 多语言 React 应用：需要支持多种语言的 React 项目。
• 动态内容翻译：实时翻译用户界面中的动态内容。
• 基于模板的翻译：在复杂的 UI 中使用模板进行翻译，保持代码的整洁和可维护性。
• SSR 环境：需要在服务器端渲染的 React 应用中实现国际化。

安装方式

npm 安装

npm install react-i18next i18next

yarn 安装

yarn add react-i18next i18next

使用示例

初始化 react-i18next

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import i18next from 'i18next';
import App from './App';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "welcome": "Welcome to our application"
      }
    },
    fr: {
      translation: {
        "welcome": "Bienvenue dans notre application"
      }
    }
  }
});

ReactDOM.render(
  <I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>,
  document.getElementById('root')
);

使用 useTranslation 钩子

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

function MyComponent() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}

export default MyComponent;

使用 Trans 组件

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

function MyComponent() {
  return (
    <Trans i18nKey="description.part1">
      To get started, edit <code>src/App.js</code> and save to reload.
    </Trans>
  );
}

export default MyComponent;

常用 API 介绍

• useTranslation()：钩子，用于访问翻译函数 t 和当前语言 i18n 实例。
  • const { t, i18n } = useTranslation();
  • t('key') 用于获取翻译字符串。
• Trans 组件：用于翻译复杂的字符串，支持 HTML 结构和 React 组件。
  • <Trans i18nKey="key">Your text</Trans>
• withTranslation()：高阶组件 (HOC)，用于将翻译功能注入到类组件中。
  • export default withTranslation()(MyComponent);
• I18nextProvider：提供 i18next 实例给整个 React 应用，确保所有组件都能访问翻译功能。
  • <I18nextProvider i18n={i18next}>...</I18nextProvider>
• initReactI18next：与 i18next 一起使用，用于初始化 React 绑定。
  • i18next.use(initReactI18next).init({...})

高级用法

自定义语言检测

可以通过配置自定义的语言检测逻辑，例如从 URL、cookie 或浏览器设置中检测语言：

import LanguageDetector from 'i18next-browser-languagedetector';

i18next
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    detection: {
      order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
      caches: ['localStorage', 'cookie']
    },
    // 其他配置
  });

动态加载翻译文件

使用 i18next-http-backend 插件动态加载翻译文件，减小初始包大小：

import Backend from 'i18next-http-backend';

i18next
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    // 其他配置
  });

官方资料

• react-i18next 官方网站
• GitHub 仓库

想了解更多可以参考官方资料