React.js如何實現國際化

在React.js中實現國際化（i18n）通常涉及以下幾個步驟：

1. 選擇國際化庫：選擇一個適合你項目的國際化庫。一些流行的選擇包括react-intl、i18next和react-i18next。

2. 設置語言資源：為每種支持的語言創建語言資源文件。這些文件通常包含翻譯的鍵值對。

3. 集成國際化庫：在你的React應用中集成所選的國際化庫，并配置它以使用你的資源文件。

4. 實現語言切換功能：提供一個用戶界面，允許用戶切換語言。

5. 使用翻譯組件：在你的組件中使用國際化庫提供的組件或鉤子來顯示翻譯后的文本。

下面是使用react-i18next和i18next實現國際化的基本步驟：

步驟 1: 安裝依賴

首先，你需要安裝i18next和react-i18next：

npm install i18next react-i18next

步驟 2: 創建語言資源文件

在你的項目中創建一個文件夾來存放語言資源文件，例如public/locales。在這個文件夾中，為每種語言創建一個JSON文件，如en.json和zh.json。

public/locales/en.json:

{
  "welcome": "Welcome to React",
  "message": {
    "hello": "hello world"
  }
}

public/locales/zh.json:

{
  "welcome": "歡迎來到React",
  "message": {
    "hello": "你好，世界"
  }
}

步驟 3: 配置i18next

在你的應用中配置i18next。你可以在應用的入口文件（如index.js）中進行配置：

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

// 導入語言資源
import en from './public/locales/en.json';
import zh from './public/locales/zh.json';

i18n
  .use(initReactI18next) // 將i18next與React綁定
  .init({
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: zh
      }
    },
    lng: "en", // 默認語言
    fallbackLng: "en", // 如果找不到對應語言，使用默認語言
    interpolation: {
      escapeValue: false // React已經處理了XSS防護，所以不需要轉義
    }
  });

export default i18n;

步驟 4: 實現語言切換功能

你可以創建一個簡單的組件來切換語言：

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

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

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

export default LanguageSwitcher;

步驟 5: 使用翻譯組件

在你的組件中使用useTranslation鉤子來獲取翻譯函數，并使用它來顯示翻譯后的文本：

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

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

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

export default WelcomeMessage;

最后，在你的應用中使用LanguageSwitcher和WelcomeMessage組件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // 引入i18n配置

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

在App.js中：

import React from 'react';
import WelcomeMessage from './components/WelcomeMessage';
import LanguageSwitcher from './components/LanguageSwitcher';

function App() {
  return (
    <div className="App">
      <WelcomeMessage />
      <LanguageSwitcher />
    </div>
  );
}

export default App;

這樣，你就完成了在React.js應用中實現基本國際化的步驟。用戶現在可以通過點擊按鈕來切換語言，并看到相應的翻譯文本。