React - React Intl 使用指南

在 React 项目中使用 react-intl 实现国际化主要分为三步：安装与设置、定义语言文件、在组件中使用。下面是具体的操作步骤和代码示例。

1. 安装与项目设置

首先，安装必要的库：

npm install react-intl
# 或者
yarn add react-intl

2. 创建语言文件

在 src 下创建一个 locales 文件夹，用于存放不同语言的 JSON 文件。这些文件包含了应用中所有需要翻译的文本，以键值对的形式组织。

src/locales/en.json (英文)

{
  "app.greeting": "Hello, World!",
  "app.description": "This is a simple react application."
}

src/locales/zh.json (中文)

{
  "app.greeting": "你好，世界！",
  "app.description": "这是一个简单的 React 应用。"
}

3. 配置 IntlProvider

IntlProvider 是 react-intl 提供的核心组件，它需要包裹整个应用（或其需要国际化的部分），为所有子组件提供国际化上下文。它需要两个关键属性：locale（当前语言）和 messages（当前语言对应的文本对象）。

在项目的入口文件（如 App.js）中，我们可以使用 useState 来管理当前语言的状态，并通过按钮切换。

src/App.js

import React, { useState } from "react";
import { IntlProvider } from "react-intl";
// 导入语言文件
import messages_en from "./locales/en.json";
import messages_zh from "./locales/zh.json";

// 将所有的消息对象整合起来，方便通过语言标识符调用
const messages = {
  en: messages_en,
  zh: messages_zh,
};

function App() {
  const [locale, setLocale] = useState("en"); // 默认语言为英文

  return (
    // IntlProvider 为所有子组件提供国际化能力
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div className="App">
        <div>
          {/* 语言切换按钮，点击时更新 locale 状态 */}
          <button onClick={() => setLocale("en")}>English</button>
          <button onClick={() => setLocale("zh")}>中文</button>
        </div>
        {/* 在这里放置你的其他组件 */}
        <MyComponent />
      </div>
    </IntlProvider>
  );
}

// 一个示例组件
function MyComponent() {
  return <div>{/* 国际化内容将在这里展示 */}</div>;
}

export default App;

4. 在组件中使用

配置好 IntlProvider 后，就可以在应用的任何子组件中使用 react-intl 提供的 API 来显示翻译后的文本了。主要有两种方式：组件形式和 Hooks 形式。

使用 FormattedMessage 组件

这是最常用的方式，适用于在 JSX 中直接显示文本。

import React from "react";
import { FormattedMessage } from "react-intl";

function MyComponent() {
  return (
    <div>
      <h1>
        {/* id 属性对应 JSON 文件中的键名 */}
        <FormattedMessage id="app.greeting" />
      </h1>
      <p>
        <FormattedMessage id="app.description" />
      </p>
    </div>
  );
}

export default MyComponent;

使用 useIntl Hook

当需要将翻译后的文本作为字符串传递给其他属性（如 placeholder, aria-label）或在非 JSX 的 JavaScript 代码中使用时，可以使用 useIntl Hook。

import React from "react";
import { useIntl } from "react-intl";

function MyComponent() {
  const intl = useIntl();

  return (
    <div>
      <input
        type="text"
        // 使用 intl.formatMessage 获取字符串
        placeholder={intl.formatMessage({ id: "app.greeting" })}
      />
      <button aria-label={intl.formatMessage({ id: "app.description" })}>
        <FormattedMessage id="app.greeting" />
      </button>
    </div>
  );
}

export default MyComponent;

通过以上步骤，你就完成了在 React 项目中对 react-intl 的基础集成和使用。当用户点击“English”或“中文”按钮时，locale 状态改变，IntlProvider 会重新渲染并提供新的语言包，从而触发页面上所有文本的更新。