React 如何实现国际化

在 React 应用中实现国际化（i18n）可以使用多种方法和库。最常用的库之一是 react-i18next，它是 i18next 的一个 React 绑定库。下面是一个使用 react-i18next 实现国际化的示例步骤：

#1. 安装依赖

首先，安装必要的包：

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

#2. 配置 i18next

在你的项目中创建一个 i18n.js 文件，并进行以下配置：

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


import HttpApi from 'i18next-http-backend';


import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    supportedLngs: ['en', 'fr', 'de'], 
    fallbackLng: 'en', 
    detection: {
      order: ['queryString', 'cookie'], 
      caches: ['cookie'] 
    },
    backend: {
      
      loadPath: '/locales/{{lng}}/translation.json'
    }
  });

export default i18n;

#3. 创建语言文件

在 public 目录下创建一个 locales 文件夹，然后为每种语言创建一个子文件夹，并在每个子文件夹中添加 translation.json 文件。例如：

复制public
└── locales
    ├── en
    │   └── translation.json
    ├── fr
    │   └── translation.json
    └── de
        └── translation.json

每个 translation.json 文件中包含翻译内容，例如：

复制{
  "welcome": "Welcome",
  "description": "This is a description."
}

#4. 在 React 组件中使用

在你的应用根组件中引入 i18n 配置文件，并使用 I18nextProvider 包裹应用：

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

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

然后在组件中使用 useTranslation 钩子来获取翻译功能：

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

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

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

export default MyComponent;

#5. 切换语言

你可以通过调用 i18n.changeLanguage 方法来切换语言。例如，添加一个按钮来切换语言：

复制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('fr')}>Français</button>
      <button onClick={() => changeLanguage('de')}>Deutsch</button>
    </div>
  );
}

export default LanguageSwitcher;

将这个 LanguageSwitcher 组件添加到你的应用中，你就可以通过点击按钮来切换语言了

这样，你的 React 应用就成功实现了国际化