react項目中如何引入國際化

更新時間：2023年07月28日 11:55:17 作者：demo123567

在React項目中引入國際化可以使用第三方庫來實現，本文主要介紹了react項目中如何引入國際化，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

react-i18next

在 React 項目中引入國際化（Internationalization，簡稱 i18n）可以使用第三方庫來實現。其中，最常用且流行的國際化庫是 react-i18next，它基于 i18next 實現，提供了方便易用的國際化功能。下面是在 React 項目中使用 react-i18next 的基本步驟：

安裝依賴：

首先，在 React 項目中安裝 react-i18next 和 i18next 依賴：

npm install i18next react-i18next

初始化 i18next：

在項目的入口文件（通常是 index.js 或 App.js）中初始化 i18next：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import { nextLocal } from './nextLocals'; // 定義的語言文件
i18n
? .use(initReactI18next)
? .init({
? ? // 設置語言資源，可以根據需要引入其他語言文件
? ? resources: {
? ? ? en: {
? ? ? ? translation: {
? ? ? ? ? // 將所有需要國際化的文本放在這里
? ? ? ? ? // 例如："hello": "Hello",
? ? ? ? ? ...nextLocal.en
? ? ? ? },
? ? ? },
? ? ? zh: {
? ? ? ? translation: {
? ? ? ? ? // 中文翻譯
? ? ? ? ? // 例如："hello": "你好",
? ? ? ? ? ...nextLocal.zh
? ? ? ? },
? ? ? },
? ? },
? ? lng: 'zh', // 默認語言
? ? fallbackLng: 'zh', // 如果當前語言沒有對應的翻譯，將使用該語言作為備用
? ? interpolation: {
? ? ? escapeValue: false, // 不要對翻譯的文本進行轉義，以支持 HTML 標簽
? ? },
? });
ReactDOM.render(
? <React.StrictMode>
? ? <App />
? </React.StrictMode>,
? document.getElementById('root')
);

上面用到的nextLocals文件如下：

// index.tsx
import homeEn from "./Home/en.json";
import homeZh from "./Home/zh.json";
export const nextLocal = {
? en: { ...homeEn },
? zh: { ...homeZh },
};
// ./Home/en.json
{
? "home": {
? ? "hello": "Hello"
? }
}
// ./Home/en.json
{
? "home": {
? ? "hello": "你好"
? }
}

不同頁面用不同的文件夾管理，這樣會更清楚。

切換語言：

可以通過 i18n.changeLanguage() 方法來在組件中切換語言。例如，可以在項目中添加一個按鈕來切換語言，這里定義了一個ChangeLanguage文件，內容如下：

import React from "react";
import { Button } from "antd";
import { useTranslation } from "react-i18next";
const LanguageSwitcher=()=> {
? const { i18n } = useTranslation();
? const changeLanguage = (lng: "en" | "zh") => {
? ? i18n.changeLanguage(lng);
? };
? return (
? ? <div>
? ? ? <Button
? ? ? ? type="primary"
? ? ? ? style={{ marginRight: 8 }}
? ? ? ? onClick={() => changeLanguage("en")}
? ? ? >
? ? ? ? English
? ? ? </Button>
? ? ? <Button onClick={() => changeLanguage("zh")}>中文</Button>
? ? </div>
? );
}
export default LanguageSwitcher;

使用 useTranslation 鉤子：

在需要國際化的組件中，可以使用 useTranslation 鉤子來獲取翻譯函數，并進行文本的國際化：
這里引用了上面的組件ChangeLanguage，可以點擊切換語言

import React from 'react';
import { useTranslation } from 'react-i18next';
import ChangeLang from './ChangeLanguage'
function MyComponent() {
? const { t } = useTranslation();
? return (
? ? <div>
? ? ? {/* 使用 t 函數進行國際化 */}
? ? ?<ChangeLang />
? ? ?<div style={{paddingTop: 16}}> {t('home.hello')}</div>
? ? </div>
? );
}
export default MyComponent;

react-intl-universal

使用 react-intl-universal 是另一個流行的 React 國際化庫，它提供了簡單易用的國際化功能。下面是在 React 項目中使用 react-intl-universal 的基本步驟：

安裝依賴：

首先，在 React 項目中安裝 react-intl-universal 依賴：

npm install react-intl-universal

初始化國際化資源：

在項目的入口文件（通常是 index.js 或 App.js）中初始化國際化資源：

import React from 'react';
import ReactDOM from 'react-dom';
import intl from 'react-intl-universal';
import App from './App';
const locales = {
? en: require('./locales/en.json'), // 英文翻譯文件
? zh: require('./locales/zh.json'), // 中文翻譯文件
};
const currentLocale = localStorage.getItem('language') || 'zh'; // 默認語言
intl.init({
? currentLocale,
? locales,
});
ReactDOM.render(
? <React.StrictMode>
? ? <App />
? </React.StrictMode>,
? document.getElementById('root')
);

創(chuàng)建翻譯文件：

在項目的 src 目錄下，創(chuàng)建一個 locales 文件夾，并在其中添加語言文件。例如，創(chuàng)建 en.json 和 zh.json 文件：

en.json:

{
? "hello": "Hello",
? "welcome": "Welcome, {name}"
}

zh.json:

{
  "hello": "你好",
  "welcome": "歡迎，{name}"
}

使用 FormattedMessage 組件：

在需要國際化的組件中，可以使用 FormattedMessage 組件來進行文本的國際化，并支持變量插值：

import React from 'react';
import { FormattedMessage } from 'react-intl-universal';
const MyComponent()=> {
? const name = 'John';
? return (
? ? <div>
? ? ? {/* 使用 <FormattedMessage> 組件進行國際化 */}
? ? ? <p>
? ? ? {intl.get('hello')}
? ? ? </p>
? ? ? <p>
? ? ? // 或者這么使用
? ? ? ? <FormattedMessage id="welcome" values={{ name }} />
? ? ? </p>
? ? </div>
? );
}
export default MyComponent;

切換語言：
您可以在項目中使用 intl.setLocale() 方法來切換語言。例如，您可以在項目中添加一個按鈕來切換語言：

import React from 'react';
const LanguageSwitcher = ()=> {
? const changeLanguage = (locale: 'en' | 'zh') => {
? ? localStorage.setItem('language',locale); // 保存
? ? window.location.reload(); // 重新加載頁面
? };
? return (
? ? <div>
? ? ? <button onClick={() => changeLanguage('en')}>English</button>
? ? ? <button onClick={() => changeLanguage('zh')}>中文</button>
? ? </div>
? );
}
export default LanguageSwitcher;

使用react-intl-universal需要注意的是，每次更新語言需要重新加載頁面。

到此這篇關于react項目中如何引入國際化的文章就介紹到這了,更多相關react引入國際化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: