最完整的 react-i18next 入门指南：从安装到实战

【免费下载链接】react-i18next Internationalization for react done right. Using the i18next i18n ecosystem. 项目地址: https://gitcode.com/gh_mirrors/re/react-i18next

你还在为 React 应用的国际化（Internationalization，简称 i18n）而烦恼吗？是否觉得现有方案配置复杂、难以维护？本文将带你从零开始，掌握 react-i18next 的核心用法，轻松实现多语言切换功能。读完本文，你将能够：完成 react-i18next 的安装与配置、使用多种方式实现组件国际化、掌握语言切换的实现方法、了解实际项目中的最佳实践。

项目介绍

react-i18next 是一个基于 i18next 生态系统的 React 国际化解决方案，它提供了简单易用的 API，能够帮助开发者快速实现 React 应用的多语言支持。项目源码托管在 gitcode.com，官方文档可以参考 README.md。

i18next 生态系统非常强大，支持多种框架和平台，实现了“一次学习，到处翻译”的理念。其生态系统架构如图所示：

安装与基本配置

安装依赖

react-i18next 的安装非常简单，使用 npm 命令即可：

npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector

其中，i18next 是核心库，i18next-http-backend 用于从服务器加载翻译文件，i18next-browser-languagedetector 用于检测用户浏览器语言。

初始化配置

创建 i18n 配置文件 src/i18n.js，配置如下：

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend) // 加载翻译文件
  .use(LanguageDetector) // 检测用户语言
  .use(initReactI18next) // 与 React 集成
  .init({
    fallbackLng: 'en', // 默认语言
    debug: true, // 开发模式下开启调试
    interpolation: {
      escapeValue: false, // React 已经默认转义，这里设为 false
    }
  });

export default i18n;

详细配置可以参考 example/react/src/i18n.js。

翻译文件的组织

在 public 目录下创建 locales 文件夹，用于存放翻译文件，目录结构如下：

public/
  locales/
    en/
      translation.json
    de/
      translation.json

例如，public/locales/en/translation.json 的内容如下：

{
  "title": "Welcome to React",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Learn React"
  }
}

public/locales/de/translation.json 的内容如下：

{
  "title": "Willkommen bei React",
  "description": {
    "part1": "Um zu beginnen, bearbeiten Sie <1>src/App.js</1> und speichern Sie, um neu zu laden.",
    "part2": "React lernen"
  }
}

在组件中使用

使用 useTranslation 钩子

函数组件中推荐使用 useTranslation 钩子，示例如下：

import { useTranslation } from 'react-i18next';

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

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

  return (
    <div>
      <h2>{t('title')}</h2>
      <div>{t('description.part2')}</div>
      <button onClick={() => changeLanguage('de')}>de</button>
      <button onClick={() => changeLanguage('en')}>en</button>
    </div>
  );
}

使用 withTranslation HOC

对于类组件，可以使用 withTranslation 高阶组件：

import { withTranslation } from 'react-i18next';

class LegacyWelcomeClass extends React.Component {
  render() {
    const { t } = this.props;
    return <h2>{t('title')}</h2>;
  }
}

const Welcome = withTranslation()(LegacyWelcomeClass);

使用 Trans 组件

Trans 组件用于处理包含 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>
  );
}

翻译文件中的对应条目为：

"description.part1": "To get started, edit <1>src/App.js</1> and save to reload."

其中 <1> 和 </1> 对应 Trans 组件中的第一个子元素 <code>。

完整的组件示例可以参考 example/react/src/App.js。

实际项目示例

语言切换功能

在实际项目中，我们可以实现一个语言切换组件，允许用户手动切换语言。结合前面的 useTranslation 钩子，很容易实现这一功能。

与 locize 集成

locize 是一个翻译管理平台，可以帮助开发者更高效地管理翻译流程。项目中提供了与 locize 集成的示例，具体可以参考 example/locize/。

以下是 locize 集成的演示视频截图：

高级用法

TypeScript 支持

react-i18next 提供了良好的 TypeScript 支持，项目中包含了 TypeScript 示例，可以参考 example/react-typescript/。

服务端渲染

对于服务端渲染（SSR）场景，react-i18next 也提供了相应的解决方案，示例可以参考 example/razzle-ssr/。

测试

项目中提供了 Jest 测试示例，可以参考 example/test-jest/，确保国际化功能的正确性。

总结

本文介绍了 react-i18next 的基本使用方法，包括安装配置、翻译文件组织、组件国际化等内容。通过 react-i18next，我们可以轻松实现 React 应用的多语言支持。更多高级用法和最佳实践，可以参考官方文档和项目示例。

希望本文对你有所帮助，祝你在国际化项目中取得成功！

【免费下载链接】react-i18next Internationalization for react done right. Using the i18next i18n ecosystem. 项目地址: https://gitcode.com/gh_mirrors/re/react-i18next