React 国际化 (i18next) 教程

概述

在本教程中，我们将学习如何在 React 应用中实现国际化（i18n）。我们将使用 i18next 库来管理多语言支持。通过本教程，你将了解如何设置 i18next，如何动态切换语言，以及如何处理复杂的翻译需求。

1. 环境搭建

在开始之前，确保你已经安装了 Node.js 和 npm。如果你还没有创建 React 应用，可以使用 Create React App 来快速搭建一个项目。

npx create-react-app my-i18n-app
cd my-i18n-app

2. 安装 i18next 和相关依赖

首先，我们需要安装 i18next 和 react-i18next 这两个库。

npm install i18next react-i18next i18next-browser-languagedetector

• i18next: 核心库，提供国际化功能。
• react-i18next: React 的集成库，简化在 React 组件中使用 i18next。
• i18next-browser-languagedetector: 自动检测用户语言的插件。

3. 配置 i18next

在 src 目录下创建一个 i18n.js 文件，用于配置 i18next。

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

import enTranslation from './locales/en/translation.json';
import esTranslation from './locales/es/translation.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: enTranslation,
      },
      es: {
        translation: esTranslation,
      },
    },
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

3.1 创建翻译文件

在 src 目录下创建 locales 文件夹，并在其中创建 en 和 es 文件夹，分别存放英文和西班牙文的翻译文件。

src/locales/en/translation.json:

{
  "welcome": "Welcome to React",
  "description": "This is a simple example of i18next in React."
}

src/locales/es/translation.json:

{
  "welcome": "Bienvenido a React",
  "description": "Este es un ejemplo simple de i18next en React."
}

4. 在 React 组件中使用 i18next

4.1 使用 useTranslation Hook

在 App.js 中使用 useTranslation Hook 来获取翻译文本。

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

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}

export default App;

4.2 初始化 i18next

在 index.js 中导入 i18n.js 文件，确保在应用启动时初始化 i18next。

import React from 'react';
import ReactDOM from 'react-dom';
import './i18n';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

5. 运行应用

现在你可以运行你的应用，并测试语言切换功能。

npm start

6. 实践练习

练习 1: 添加更多语言

尝试为你的应用添加第三种语言（例如法语），并实现语言切换功能。

练习 2: 处理复数形式

使用 i18next 的复数处理功能，实现一个显示不同数量物品的组件。

练习 3: 动态翻译

创建一个组件，根据用户的输入动态显示翻译文本。

7. 总结

通过本教程，你已经学会了如何在 React 应用中使用 i18next 实现国际化。你了解了如何配置 i18next，如何在组件中使用翻译功能，以及如何动态切换语言。希望这些知识能帮助你在未来的项目中更好地支持多语言用户。

8. 进一步学习

• 复杂翻译需求: 学习如何处理包含变量、复数形式和上下文的复杂翻译。
• 服务器端渲染 (SSR): 了解如何在 Next.js 中集成 i18next。
• 性能优化: 探索如何优化大型应用中的翻译加载和切换性能。

继续探索和实践，你将能够构建出更加强大和用户友好的国际化应用！