如何使用 React Intl 来国际化你的 React 应用程序

作者
Tweet
Share
Share
Pin
0 Shares

React Intl 是一个广泛使用的库，专门为 React 应用提供国际化支持。所谓国际化（i18n），指的是使应用程序能够适应不同语言和文化背景的过程。

通过 ReactIntl，你可以便捷地在 React 应用中实现多语言和多地区的支持，为全球用户提供定制化的体验。

React Intl 的安装

要使用 React Intl 库，首先需要进行安装。你可以选择 npm、yarn 或 pnpm 这些常用的包管理器来完成安装。

若使用 npm，请在终端中执行以下命令：

 npm install react-intl

若选择 yarn，则执行：

 yarn add react-intl

React Intl 库的使用方法

成功安装 React Intl 库后，即可在应用中利用其提供的组件和功能。 React Intl 在功能上与 JavaScript Intl API 有相似之处。

React Intl 库中，两个核心组件是 `FormattedMessage` 和 `IntlProvider`。

`FormattedMessage` 组件用于在应用中展示已翻译的文本，而 `IntlProvider` 组件则为应用提供翻译和格式化所需的上下文信息。

在使用 `FormattedMessage` 和 `IntlProvider` 进行翻译之前，你需要先创建翻译文件。翻译文件中包含了应用中所有需要翻译的文本。你可以为每种语言和地区设置单独的文件，也可以将所有翻译集中在一个文件中。

例如：

 export const frenchMessages = {
    greeting: "Bonjour {name}"
}
   
export const italianMessages = {
    greeting: "Buongiorno {name}"
}

这个示例翻译文件定义了两个翻译对象：`frenchMessages` 和 `italianMessages`。其中，问候语字符串中的 `{name}` 占位符可以在运行时被动态替换。

要在应用中使用翻译，需要使用 `IntlProvider` 组件包裹应用的根组件。 `IntlProvider` 组件接受三个关键的 React 属性：`locale`、`defaultLocale` 和 `messages`。

`locale` 属性用于指定用户的地区设置，`defaultLocale` 用于在用户首选地区设置不可用时提供备选，`messages` 属性则接受翻译对象。

以下代码展示了如何使用 `IntlProvider`:

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { frenchMessages } from "./translation";
ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      <IntlProvider locale="fr" messages={frenchMessages} defaultLocale="en">
        <App />
      </IntlProvider>
    </React.StrictMode>
);

在此示例中，`IntlProvider` 组件接收了 “fr” 地区设置、`frenchMessages` 翻译以及默认的 “en” 地区设置。

你可以传递多个语言环境或翻译对象，`IntlProvider` 将自动检测用户的浏览器语言，并使用与之匹配的翻译。

要在应用中显示翻译后的文本，请使用 `FormattedMessage` 组件。 `FormattedMessage` 组件的关键属性是 `id`，它对应于消息对象中的消息 ID。

该组件还接受 `defaultMessage` 和 `values` 属性。 `defaultMessage` 属性在当前语言环境没有对应翻译时提供默认文本，而 `values` 属性则为翻译消息中的占位符提供动态值。

例如：

 import React from "react";
import { FormattedMessage } from "react-intl";
function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}
export default App;

在这段代码中，`FormattedMessage` 组件的 `id` 属性使用了 `frenchMessages` 对象中的 `greeting` 键，`values` 属性将 `{name}` 占位符替换成了 “John”。

使用 `FormattedNumber` 组件格式化数字

React Intl 还提供了一个 `FormattedNumber` 组件，用于根据当前地区设置格式化数字。该组件接受多种属性来定制格式，例如样式、货币以及最小和最大小数位数。

以下是一些示例：

 import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}
export default App;

这个示例展示了 `FormattedNumber` 组件的使用，其中 `value` 属性指定了要格式化的数字。

通过 `style` 属性，可以自定义数字的格式外观。可以将 `style` 属性设置为 `decimal`（小数）、`percent`（百分比）或 `currency`（货币）。

当将 `style` 属性设置为 `currency` 时，`FormattedNumber` 组件会使用 `currency` 属性中指定的代码将数字格式化为货币值：

 import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}
export default App;

在上述代码块中，`FormattedNumber` 组件使用了货币样式和 USD 货币代码来格式化数字。

你还可以使用 `minimumFractionDigits` 和 `maximumFractionDigits` 属性来格式化具有特定小数位数的数字。

`minimumFractionDigits` 属性指定了要显示的最小小数位数。反之，`maximumFractionDigits` 属性指定了小数位数的最大数量。

如果数字的小数位数少于指定的 `minimumFractionDigits`，React Intl 会用零来填充。如果数字的小数位数多于指定的 `maximumFractionDigits`，则该库会将数字四舍五入。

以下示例演示了这些属性的使用方法：

 import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}
export default App;

使用 `FormattedDate` 组件格式化日期

你可以使用 React Intl 以一致且易于阅读的方式格式化日期。 `FormattedDate` 组件提供了一种简单而高效的日期格式化方法。它的工作方式类似于用于格式化日期的日期时间库，例如 Moment.js。

`FormattedDate` 组件需要多个属性，例如 `value`、`day`、`month` 和 `year`。 `value` 属性接受你要格式化的日期，其他属性则配置其格式。

例如：

 import React from "react";
import { FormattedDate } from "react-intl";
function App() {
  const today = new Date();
  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}
export default App;

在这个例子中，`value` 属性使用了当前日期。此外，通过 `day`、`month` 和 `year` 属性，你可以指定年、月和日以长格式显示。

除了日、月和年之外，还有其他属性用于格式化日期的外观。以下是这些属性及其可接受的值：

  • 年份: “numeric”, “2-digit”
  • 月份: “numeric”, “2-digit”, “narrow”, “short”, “long”
  • 日期: “numeric”, “2-digit”
  • 小时: “numeric”, “2-digit”
  • 分钟: “numeric”, “2-digit”
  • 秒: “numeric”, “2-digit”
  • 时区名称: “short”, “long”

你还可以使用 `FormattedDate` 组件来格式化和显示时间：

 import React from "react";
import { FormattedDate } from "react-intl";
function App() {
  const today = new Date();
  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}
export default App;

为更广泛的受众进行 React 应用的国际化

你已经学习了如何在 React 应用中安装和配置 React-Intl 库。 React-intl 可以方便地格式化 React 应用中的数字、日期和货币。你可以利用 `FormattedMessage`、`FormattedNumber` 和 `FormattedDate` 组件来根据用户的地区设置格式化数据。

React 开发人员经常会犯一些可能导致严重后果的错误，例如未能正确更新状态。重要的是要意识到这些常见错误，并尽早纠正，以避免出现代价高昂的问题。