使用 react-intl 服务翻译

Question

我目前正在工作的项目使用 react-intl 来处理 i18n，我注意到组件以 3 种不同的方式提供格式化消息：

1. 使用组件：<FormattedMessage id="MessageId" />
2. 使用函数：intl.formatMessage({id: "MessageId"})
3. 直接使用消息对象：intl.messages["MessageId"]

我认为方法 #1 和 #2 是可行的方法，但我认为方法 #3 非常有限。

使用#3 有哪些好的理由？

Answer 1

第一种方法是反应方式，如果您使用的是 ReactJS，则推荐使用。 FormattedMessage 组件 uses useIntl 钩子在内部访问 intl 对象（方法 #2）：

<FormattedMessage id="GREETING" />

第二种方法直接使用 intl 对象，没有 React 抽象。如果您将 intl API 与其他不受支持的框架集成，请使用此选项。

intl.formatMessage({ id: "GREETING" })

永远不要使用第三种方法。 intl.messages 只是一个普通的 Javascript 对象，它将每个 MessageId 映射到翻译后的文本。你甚至不能使用 ICU Message Formatting。例如：

{
  "GREETING": "Hello, {name}"
}

intl.formatMessage({ id: "GREETING" }, { name: "Near" }); // Hello, Near
intl.messages["GREETING"]; // Hello, {name}