React 中如何进行国际化 (i18n)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 React 中进行国际化（i18n）通常使用第三方库，如 react-i18next 或 react-intl。以下是使用 react-i18next 的推荐步骤：

安装依赖：
```
npm install i18next react-i18next
```

配置 i18n：创建一个 i18n.js 文件来配置国际化设置：

// www.javascriptcn.com code example
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // 初始化 react-i18next
  .init({
    resources: {
      en: {
        translation: {
          welcome: 'Welcome',
        },
      },
      zh: {
        translation: {
          welcome: '欢迎',
        },
      },
    },
    lng: 'en', // 默认语言
    fallbackLng: 'en', // 回退语言
    interpolation: {
      escapeValue: false, // React 已经处理了 XSS
    },
  });

export default i18n;

在组件中使用：在 React 组件中使用 useTranslation 钩子来获取翻译内容：

// www.javascriptcn.com code example
import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  );
}

export default App;

切换语言：可以通过 i18n.changeLanguage 方法来动态切换语言：

// www.javascriptcn.com code example
import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

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

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default LanguageSwitcher;

本题详细解读

什么是国际化（i18n）？

国际化（Internationalization，简称 i18n）是指设计和开发应用程序，使其能够轻松适应不同的语言和地区，而不需要修改代码。i18n 通常涉及文本翻译、日期格式、货币符号等。

为什么使用 `react-i18next`？

react-i18next 是一个基于 i18next 的 React 国际化库，它提供了简单易用的 API 和丰富的功能，如动态语言切换、复数形式处理、插值等。它也是社区中最受欢迎的国际化解决方案之一。

配置详解

resources：定义了不同语言的翻译内容。每个语言对应一个对象，对象中的 translation 字段包含了具体的翻译键值对。
lng：设置默认语言。
fallbackLng：当某个翻译键在当前语言中不存在时，回退到指定的语言。
interpolation：配置插值选项，escapeValue: false 表示 React 已经处理了 XSS 攻击，不需要再次转义。

使用 `useTranslation` 钩子

useTranslation 是 react-i18next 提供的一个 React 钩子，用于在函数组件中获取翻译函数 t 和 i18n 实例。t 函数用于根据键获取翻译内容。

动态切换语言

通过 i18n.changeLanguage 方法，可以在运行时动态切换应用程序的语言。通常会在语言切换组件中调用此方法，并传入目标语言的代码（如 'en' 或 'zh'）。

其他注意事项

命名空间：react-i18next 支持命名空间，可以将翻译内容按模块或功能进行分组。
懒加载翻译文件：对于大型应用，可以将翻译文件按需加载，以减少初始加载时间。
复数形式：react-i18next 支持复数形式的处理，可以根据数量动态选择翻译内容。

通过以上步骤和配置，你可以在 React 应用中轻松实现国际化功能。

React 中如何进行国际化 (i18n)？