umi 3 国际化 formatMessage 多场景使用方法

项目要支持多语言/国际化，项目使用 umi 3 框架进行项目开发，根据官方文档，可以是用 FormatMessage 实现国际化。

本文将详细介绍 umi 3 中 formatMessage 在组件、非组件以及 js/ts 文件等多场景下的使用方法。

一、在组件中使用 FormatMessage

1. 函数调用形式

推荐使用 useIntl 钩子函数来获取 formatMessage 方法，然后以函数调用的形式在组件中使用它。具体代码如下：

import { useIntl } from 'umi';

const FormatMessageComponent = () => {
  const { formatMessage } = useIntl();
  return <div>{formatMessage({ id: 'message' })}</div>;
};

export default FormatMessageComponent;

通过调用 formatMessage 方法并传入对应的参数（这里是 { id: 'message' }），就可以实现对国际化文本的渲染。

2. 组件形式

除了函数调用形式，umi 还提供了 FormattedMessage 组件，可以直接在 JSX 中以组件的形式使用，代码示例如下：

import { FormattedMessage } from 'umi';

const FormatMessageComponent = () => {
  return (
    <div>
      <FormattedMessage id="message" />
    </div>
  );
};

export default FormatMessageComponent;

将 FormattedMessage 组件包裹在对应的 JSX 结构中，并传入 id 属性即可。

二、在非组件的 js/ts 文件中调用 FormatMessage

在一些非组件的 js 或 ts 文件中，我们也可能需要使用到国际化功能。这时可以通过 getIntl 方法来获取国际化对象，然后使用其 formatMessage 方法，示例如下：

import { getIntl } from 'umi';

const func = () => {
  return { format: getIntl().formatMessage({ id: 'message' }) };
};

在函数 func 中通过调用 getIntl() 获取到国际化对象，再通过该对象的 formatMessage 方法来获取对应的国际化文本。

三、总结

通过以上介绍，我们可以看到 umi 3 提供了多种方式来使用 FormatMessage 实现国际化功能。在组件中，可以根据实际需求选择函数调用形式或者组件形式；在非组件的 js/ts 文件中，也可以通过 getIntl 方法来获取国际化对象并使用其 formatMessage 方法。这些方法的灵活运用可以让我们在项目开发中更加方便地实现国际化，满足不同场景下的需求。

未经允许不得转载：前端资源网 - w3h5 » umi 3 国际化 formatMessage 多场景使用方法