快捷導(dǎo)航

react項(xiàng)目中如何引入國(guó)際化

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

在React項(xiàng)目中引入國(guó)際化可以使用第三方庫(kù)來(lái)實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國(guó)際化，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

react-i18next

在 React 項(xiàng)目中引入國(guó)際化（Internationalization，簡(jiǎn)稱 i18n）可以使用第三方庫(kù)來(lái)實(shí)現(xiàn)。其中，最常用且流行的國(guó)際化庫(kù)是 react-i18next，它基于 i18next 實(shí)現(xiàn)，提供了方便易用的國(guó)際化功能。下面是在 React 項(xiàng)目中使用 react-i18next 的基本步驟：

安裝依賴：

首先，在 React 項(xiàng)目中安裝 react-i18next 和 i18next 依賴：

npm install i18next react-i18next

初始化 i18next：

在項(xiàng)目的入口文件（通常是 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'; // 定義的語(yǔ)言文件
i18n
? .use(initReactI18next)
? .init({
? ? // 設(shè)置語(yǔ)言資源，可以根據(jù)需要引入其他語(yǔ)言文件
? ? resources: {
? ? ? en: {
? ? ? ? translation: {
? ? ? ? ? // 將所有需要國(guó)際化的文本放在這里
? ? ? ? ? // 例如："hello": "Hello",
? ? ? ? ? ...nextLocal.en
? ? ? ? },
? ? ? },
? ? ? zh: {
? ? ? ? translation: {
? ? ? ? ? // 中文翻譯
? ? ? ? ? // 例如："hello": "你好",
? ? ? ? ? ...nextLocal.zh
? ? ? ? },
? ? ? },
? ? },
? ? lng: 'zh', // 默認(rèn)語(yǔ)言
? ? fallbackLng: 'zh', // 如果當(dāng)前語(yǔ)言沒(méi)有對(duì)應(yīng)的翻譯，將使用該語(yǔ)言作為備用
? ? interpolation: {
? ? ? escapeValue: false, // 不要對(duì)翻譯的文本進(jìn)行轉(zhuǎn)義，以支持 HTML 標(biāo)簽
? ? },
? });
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": "你好"
? }
}

不同頁(yè)面用不同的文件夾管理，這樣會(huì)更清楚。

切換語(yǔ)言：

可以通過(guò) i18n.changeLanguage() 方法來(lái)在組件中切換語(yǔ)言。例如，可以在項(xiàng)目中添加一個(gè)按鈕來(lái)切換語(yǔ)言，這里定義了一個(gè)ChangeLanguage文件，內(nèi)容如下：

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 鉤子：

在需要國(guó)際化的組件中，可以使用 useTranslation 鉤子來(lái)獲取翻譯函數(shù)，并進(jìn)行文本的國(guó)際化：
這里引用了上面的組件ChangeLanguage，可以點(diǎn)擊切換語(yǔ)言

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

react-intl-universal

使用 react-intl-universal 是另一個(gè)流行的 React 國(guó)際化庫(kù)，它提供了簡(jiǎn)單易用的國(guó)際化功能。下面是在 React 項(xiàng)目中使用 react-intl-universal 的基本步驟：

安裝依賴：

首先，在 React 項(xiàng)目中安裝 react-intl-universal 依賴：

npm install react-intl-universal

初始化國(guó)際化資源：

在項(xiàng)目的入口文件（通常是 index.js 或 App.js）中初始化國(guó)際化資源：

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'; // 默認(rèn)語(yǔ)言
intl.init({
? currentLocale,
? locales,
});
ReactDOM.render(
? <React.StrictMode>
? ? <App />
? </React.StrictMode>,
? document.getElementById('root')
);

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

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

en.json:

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

zh.json:

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

使用 FormattedMessage 組件：

在需要國(guó)際化的組件中，可以使用 FormattedMessage 組件來(lái)進(jìn)行文本的國(guó)際化，并支持變量插值：

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

切換語(yǔ)言：
您可以在項(xiàng)目中使用 intl.setLocale() 方法來(lái)切換語(yǔ)言。例如，您可以在項(xiàng)目中添加一個(gè)按鈕來(lái)切換語(yǔ)言：

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

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

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

您可能感興趣的文章: