React 项目中如何实现多语言切换-JavaScript中文网-JavaScript教程资源分享门户

React 是一种用于构建用户界面的 JavaScript 库，它可以帮助开发者快速构建复杂的单页面应用（SPA）和可重用的 UI 组件。在实际开发中，多语言切换是一个很常见的需求，本文将详细介绍在 React 项目中如何实现多语言切换，并提供一些示例代码。

方案概述

在 React 项目中，我们可以通过以下两种方式来实现多语言切换：

使用第三方库。近年来，越来越多的 React 多语言库如 react-i18next、react-intl 等流行起来，开发者可以借助它们来快速实现多语言切换功能，并提供丰富的 API 以满足不同场景的需求。
手动实现多语言切换。通过定义一组多语言资源文件并根据当前语言环境加载对应的资源，再通过 React 组件的特性来实现多语言切换功能。

在本文中，我们将会介绍第一种和第二种方法。

使用第三方库

react-i18next

react-i18next 是最受欢迎的 React 多语言库之一，它基于 i18next 和 react 驱动，提供了简单易用的 API 来管理多语言资源，支持多种语言格式（如 json、yaml、ini 等），并且具有灵活的插件架构。

使用 react-i18next 只需三步：

安装：

npm install react-i18next i18next --save

配置：

// javascriptcn.com 代码示例
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
  .use(initReactI18next) // 初始化 react-i18next
  .init({
    lng: "en", // 默认语言
    fallbackLng: "en", // 如果出现语言匹配问题，自动降级到默认语言
    resources: {
      en: {
        translation: {
          "hello": "Hello world"
        }
      },
      zh: {
        translation: {
          "hello": "你好，世界"
        }
      }
    }
  });

使用：

// javascriptcn.com 代码示例
import React from "react";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation(); // 获取 i18n API

  return (
    <>
      <h1>{t("hello")}</h1>
      <button onClick={() => i18n.changeLanguage("zh")}>中文</button>
      <button onClick={() => i18n.changeLanguage("en")}>English</button>
    </>
  );
}

export default App;

在上面的代码中，我们定义了两种语言（英语和中文），并在组件中定义了一个按钮，当用户点击该按钮时就可以切换当前语言环境。同时，通过 useTranslation 钩子函数来获取 i18n 的 API，我们可以轻松地翻译组件中的任何文本。

细心的读者可能会注意到，我们在配置阶段中引入了一个 initReactI18next 函数，这个函数用来初始化 i18next，它和 i18next 的其他配置是一样的，它还需要在初始化时调用 use 函数来注册钩子函数。

react-intl

react-intl 是另一个流行的 React 多语言库，它直接构建在国际化标准 ICU（International Components for Unicode）之上，可以覆盖诸如格式化数字、货币、时间和日期等方面的多语言需求。

react-intl 也是一个适用于 React 应用程序的完整国际化解决方案，其中包括：

提供了一组 React 组件，可以帮助你在你的应用程序的任何地方轻松地将格式化后的文本渲染到 UI 中。
一个用于格式化数据的底层 API。
一个用于本地化您的应用程序的方便的 CLI 工具。

使用 react-intl 也很简单：

安装：

npm install react-intl --save

配置：

// javascriptcn.com 代码示例
import { IntlProvider, addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import zhLocaleData from 'react-intl/locale-data/zh';

addLocaleData([...enLocaleData, ...zhLocaleData]); // 添加语言环境数据

const translations = {
  en: {
    'hello': 'Hello, World!'
  },
  zh: {
    'hello': '你好，世界！'
  }
};

<IntlProvider
  locale={'en'}
  messages={translations['en']}>
  <App />
</IntlProvider>

使用：

// javascriptcn.com 代码示例
import { FormattedMessage } from 'react-intl';

function Greeting() {
  return <FormattedMessage id='hello' />
};

function App() {
  const [locale, setLocale] = useState('en');

  return (
    <IntlProvider
      locale={locale} // 当前语言环境
      messages={translations[locale]}
    >
      <Greeting /> // 渲染组件
      <button onClick={() => setLocale('zh')}>中文</button>
      <button onClick={() => setLocale('en')}>English</button>
    </IntlProvider>
  );
}

在上面的代码中，我们引入了 IntlProvider 组件将应用的多语言环境进行包裹。同时，我们通过 FormattedMessage 组件来实现文本的国际化。

手动实现多语言切换

如果您不想使用第三方库，您仍然可以手动实现多语言切换。在实现多语言切换时，我们需要定义一个多语言资源文件，并根据用户的语言环境加载对应的资源。

在本文中，我们定义了一个名为 messages 的多语言资源，它得到的是一个 JSON 对象：

// javascriptcn.com 代码示例
messages.json

{
  "en": {
    "hello": "Hello, World!"
  },
  "zh": {
    "hello": "你好，世界！"
  }
}

要将资源文件加载到您的 React 应用程序中，您需要编写一个简单的加载器，并将其添加到您的 App.js 文件中。

// javascriptcn.com 代码示例
import React, { Suspense, useMemo } from 'react';

const messages = {
  en: await import('./translations/en'),
  zh: await import('./translations/zh')
};

function App() {
  const locale = useMemo(() => window.navigator.language, []);

  return (
    <Suspense fallback='Loading...'>
      <IntlProvider
        locale={locale} // 获取当前系统语言
        messages={messages[locale]}
      >
        ...
      </IntlProvider>
    </Suspense>
  );
}

其中，我们利用 useMemo 钩子函数获取当前系统的语言环境，从而提高渲染性能。同时，我们包括了一个 Suspense 组件，以使我们的应用程序在的解析过程中能够正确地呈现加载状态。最后，我们使用 IntlProvider 组件包裹您的应用程序，以便在应用程序中利用上述的多语言资源。

实施多语言资源语言集成后，通过使用 React Context 机制来实现多语言切换功能。

// javascriptcn.com 代码示例
const LocaleContext = React.createContext(null);

function App() {
  const [locale, setLocale] = useState('en');

  return (
    <LocaleContext.Provider value={setLocale}>
      <Suspense fallback='Loading...'>
        <IntlProvider
          locale={locale} // 获取当前系统语言
          messages={messages[locale]}
        >
          <Greeting />
        </IntlProvider>
      </Suspense>
    </LocaleContext.Provider>
  );
}

在上面的代码中，我们使用 React 上下文来封装 setLocale 方法，并将其用作组件树中的共享方法。这允许子组件订阅并调用该方法以更改当前的语言环境。

您可以在 Greetings 组件中使用上下文来实现组件中的国际化字符串。

// javascriptcn.com 代码示例
function Greeting() {
  const setLocale = useContext(LocaleContext);

  return (
    <>
      <FormattedMessage id='hello' defaultMessage='Hello, World!' />
      <button onClick={() => setLocale('zh')}>中文</button>
      <button onClick={() => setLocale('en')}>English</button>
    </>
  );
}

在上面的代码中，我们通过 useContext 的方法来获取 LocaleContext 的值，并在组件中使用它来更新当前的语言环境。通过使用 FormattedMessage 组件来实现文本的国际化，实际上这与 react-intl 的实现方式是一样的。

总结

在本文中，我们介绍了两种实现在 React 项目中多语言切换的方法。无论您选择的是使用第三方库还是手注代码的方式，我们建议您在初始阶段便引入国际化概念到您的应用程序中。这将使您的应用程序易于维护和扩展，并为将来的增长做好准备。

同时，在实际的开发中，我们注意到每一种语言切换方法都有其相应的优缺点，开发者需要根据自身的业务需求来选择合适的方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528f37b7d4982a6ebb82bb3