React 是一种现代的 JavaScript 库，它可以用于构建用户界面，同时支持国际化（i18n）功能，以便您的应用程序可以运行在不同的语言环境中。
在本文中，我们将学习如何在 React 项目中快速切换国际化语言，并提供示例代码和指导意义。本文将分为两个部分：首先我们将介绍使用 React-i18next 实现国际化，然后我们将讨论如何动态切换语言。
第一部分：使用 React-i18next 实现国际化
React-i18next 是一个非常受欢迎的 React 国际化库。它支持多个语言，提供了非常简单的 API 和一个方便的钩子函数，以便在组件中使用。
以下是如何使用 React-i18next 实现国际化：
第一步：安装和引入 React-i18next
首先，我们需要安装 React-i18next。 npm install react-i18next
然后在我们的应用程序中引入 React-i18next。 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next';
第二步：配置 i18n
在我们开始使用 React-i18next 之前，我们需要配置它。我们可以通过创建一个 i18n 配置对象来做到这一点。
以下是一个基本的 i18n 配置对象：
const resources = { en: { translation: { “hello”: “Hello” } }, fr: { translation: { “hello”: “Bonjour” } } }; i18n .use(initReactI18next) .init({ resources, lng: “en”, fallbackLng: ‘en’ });
我们首先定义了资源对象，其中包含英语和法语键值对。然后，我们使用 initReactI18next 将 i18n 集成到 React 中。最后，我们通过设置 lng 和 fallbackLng 属性指定我们支持的语言和默认语言。
第三步：在组件中使用 i18n
现在，我们已经成功地配置了 React-i18next，让我们在组件中使用 i18n 来实现国际化。
先看看如何在类组件中使用
import React, { Component } from 'react'; import { withTranslation } from 'react-i18next';
class App extends Component { render() { const { t } = this.props; return (
{t(‘hello’)}!
); } }
export default withTranslation()(App);
再看看如何在函数式组件中使用
import React from 'react'; import { useTranslation } from 'react-i18next';
function App() { const { t } = useTranslation(); return (
{t(‘hello’)}!
); }
第二部分：如何动态切换语言
现在，我们已经成功地实现了 React 国际化，让我们看看如何在应用程序运行时动态切换语言。
第一步：定义一个切换语言的函数
首先，我们需要定义一个切换语言的函数。
以下是我们可以使用的基本切换语言函数：
function changeLanguage(lng) { i18n.changeLanguage(lng); }
第二步：在组件中使用切换语言函数
让我们在组件中实现我们的切换语言函数。
以下是我们可以使用的基本组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------------- - ---- ---------------- -------- ----- - ----- - -- ---- - - ----------------- -------- ----------------------- - -------------------------- - ------ - ------------- -- -展开代码
在这个例子中，我们使用 useTranslation 钩子函数获取 t 和 i18n，并使用 handleButtonClick 函数在按钮单击时切换语言。
第三步：重新加载语言资源
一旦我们切换了语言，我们需要重新加载新语言的资源。
以下是我们可以使用的代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - -------------- - ---- ---------------- -------- ----- - ----- - -- ---- - - ----------------- -------- ----------------------- - -------------------------- - ------------ -- - --------------------------- -- ------ ------- ------ - ------------- -- -展开代码
在这个例子中，我们使用 useEffect 钩子函数来监听 i18n 和 lang 的更改。一旦它们变化了，我们就重新加载资源。
在本文中，我们学习了如何快速切换 React 项目国际化语言，使用 React-i18next 实现国际化并在组件中使用 i18n，以及如何动态切换语言并重新加载语言资源。这些技术不仅能帮助你的应用程序在全球范围内扩展，而且还能将你的应用程序转变为更本地化的产品。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6d4a1cc0f7239cde32eb9
