react项目中如何引入国际化
作者：demo123567
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')
);创建翻译文件：
在项目的 src 目录下，创建一个 locales 文件夹，并在其中添加语言文件。例如，创建 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引入国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！