React - React-intl中injectIntl的作用？

injectIntl 是 react-intl 中的一个高阶组件 (HOC)，它的主要作用是将 intl 对象注入到组件的 props 中，使得类组件也能够像函数组件使用 useIntl 一样，访问国际化 API。

为什么需要 injectIntl？

在 react-intl 中有三种主要的国际化方式：

方式	适用组件	特点
FormattedMessage	函数组件/类组件	组件形式，直接在 JSX 中使用
useIntl	函数组件	Hook 形式，返回 intl 对象
injectIntl	类组件	HOC 形式，将 intl 注入 props

由于 Hooks 只能在函数组件中使用，如果项目中使用的是类组件，就需要用 injectIntl 来获取 intl 对象。

injectIntl 的基本使用

1. 基本语法

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

class MyComponent extends React.Component {
  render() {
    // intl 对象被注入到 props 中
    const { intl } = this.props;

    return (
      <div>
        {/* 使用 intl 对象的方法 */}
        <input placeholder={intl.formatMessage({ id: "app.placeholder" })} />
        <button>{intl.formatMessage({ id: "app.button" })}</button>
      </div>
    );
  }
}

// 使用 injectIntl 包装组件
export default injectIntl(MyComponent);

2. 实际应用示例

src/components/UserInfo.js

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

class UserInfo extends React.Component {
  // 在其他方法中使用 intl
  handleSubmit = () => {
    const { intl } = this.props;

    // 获取翻译后的消息字符串
    const successMessage = intl.formatMessage({
      id: "user.submit.success",
      defaultMessage: "提交成功",
    });

    const errorMessage = intl.formatMessage({
      id: "user.submit.error",
      defaultMessage: "提交失败",
    });

    // 可以在 alert 或 toast 中使用
    alert(successMessage);
  };

  render() {
    const { intl, username } = this.props;

    // 格式化日期
    const today = intl.formatDate(new Date(), {
      year: "numeric",
      month: "long",
      day: "numeric",
    });

    // 格式化数字（如金额）
    const balance = intl.formatNumber(1000, {
      style: "currency",
      currency: "USD",
    });

    return (
      <div>
        <h2>
          {intl.formatMessage({ id: "user.welcome" }, { name: username })}
        </h2>
        <p>
          {intl.formatMessage({ id: "user.date" })}: {today}
        </p>
        <p>
          {intl.formatMessage({ id: "user.balance" })}: {balance}
        </p>

        <input
          placeholder={intl.formatMessage({ id: "user.name.placeholder" })}
          value={username}
          onChange={this.handleChange}
        />

        <button onClick={this.handleSubmit}>
          {intl.formatMessage({ id: "user.submit" })}
        </button>
      </div>
    );
  }
}

export default injectIntl(UserInfo);

injectIntl 提供的 intl 对象方法

intl 对象提供了以下常用方法：

1. 格式化消息

// 基本使用
intl.formatMessage({ id: "message.id" });

// 带默认值
intl.formatMessage({
  id: "message.id",
  defaultMessage: "默认消息",
});

// 带参数
intl.formatMessage({ id: "user.greeting" }, { name: "张三", count: 5 });

2. 格式化日期

intl.formatDate(new Date());
intl.formatDate(date, {
  year: "numeric",
  month: "long",
  day: "numeric",
});

3. 格式化时间

intl.formatTime(new Date());
intl.formatTime(date, {
  hour: "2-digit",
  minute: "2-digit",
});

4. 格式化数字

intl.formatNumber(1000);
intl.formatNumber(1000, { style: "currency", currency: "USD" });
intl.formatNumber(0.5, { style: "percent" });

5. 格式化相对时间

intl.formatRelativeTime(0, "day"); // today
intl.formatRelativeTime(-1, "day"); // yesterday

injectIntl 的高级用法

1. 与 Redux 结合使用

import React from "react";
import { connect } from "react-redux";
import { injectIntl } from "react-intl";
import { compose } from "redux";

class OrderList extends React.Component {
  // 组件逻辑...
}

// 使用 compose 组合多个 HOC
export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  injectIntl,
)(OrderList);

2. 在事件处理函数中使用

class ErrorHandler extends React.Component {
  componentDidCatch(error, errorInfo) {
    const { intl } = this.props;

    // 使用 intl 对象生成错误报告
    const errorReport = {
      message: intl.formatMessage({ id: "error.message" }),
      timestamp: intl.formatDate(new Date(), {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      }),
    };

    this.logError(errorReport);
  }

  logError(report) {
    console.error("Error Report:", report);
  }

  render() {
    return this.props.children;
  }
}

export default injectIntl(ErrorHandler);

3. 在静态方法中使用

class ExportUtils extends React.Component {
  // 注意：静态方法无法访问 this.props
  static generateCSVHeader(intl) {
    return [
      intl.formatMessage({ id: "export.name" }),
      intl.formatMessage({ id: "export.date" }),
      intl.formatMessage({ id: "export.amount" }),
    ].join(",");
  }

  exportData = () => {
    const { intl, data } = this.props;
    const header = ExportUtils.generateCSVHeader(intl);
    // 导出逻辑...
  };

  render() {
    return (
      <button onClick={this.exportData}>
        {this.props.intl.formatMessage({ id: "export.button" })}
      </button>
    );
  }
}

export default injectIntl(ExportUtils);

注意事项

1. 性能优化：injectIntl 返回的组件实现了 shouldComponentUpdate，只有在相关的 locale 或消息变化时才会重新渲染。

2. TypeScript 支持：

import { injectIntl, InjectedIntlProps } from 'react-intl';

interface MyComponentProps extends InjectedIntlProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    const { intl, name } = this.props;
    return <div>{intl.formatMessage({ id: 'greeting' }, { name })}</div>;
  }
}

export default injectIntl(MyComponent);

3. 不能用于函数组件：对于函数组件，应该优先使用 useIntl Hook。

injectIntl 主要是为了在类组件中提供国际化能力，是 react-intl 为了兼容类组件而提供的解决方案。