如何处理 React-Intl 消息的多次使用？

Posted 2023-02-19

【中文标题】如何处理 React-Intl 消息的多次使用？

【英文标题】：How to deal with multiple usage of a React-Intl message?

【发布时间】：2016-04-24 22:12:00

【问题描述】：

我在react-intl 文档（我正在使用v2 分支）中找不到关于这种用法的任何内容，因此出现了这个问题。以下用例是否有推荐的方法？

假设我有 2 个组件，Tooltip 和 Select。两者都需要相同的 i18n 格式字符串，例如：

<FormattedMessage
    id='ui.widget.cycleOffsetSelector.timeCycle.label'
    defaultMessage="This cycle"
    values=cycle: props.cycle
/>

如何在另一个组件中使用相同的消息？就用这个：

<FormattedMessage
    id='ui.widget.cycleOffsetSelector.timeCycle.label'
    values=cycle: props.cycle
/>

不起作用（不应该:)）。那么，这样做的正确方法是什么？ 我是否必须在我的应用程序中全局保存这些共享消息？因为维护与代码分开的“共享”国际消息列表会变得很麻烦，这正是react-intl 声称要解决的问题。

【问题讨论】：

这是 react-intl 的 v1 还是 v2？

v2.抱歉，忘记提了。

我没有答案，但您始终可以直接使用formatMessage() 函数，就像guide 一样。

【参考方案1】：

在 react-intl v2 中，消息 ID 是静态的，因此没有 2 个 ID 可以相同。想法是将组件中使用的资产保留在同一文件中，以便于开发。然后在构建时提取字符串进行翻译。很多时候，这个问题可以通过创建一个高阶组件（HOC）或创建一个组件来重用而不是重用消息字符串来解决。

如果创建 HOC 不是一个选项，这里还有一些其他方法可以解决此问题：

---

您可以在一个集中的消息文件中使用defineMessages() 来定义您重用的公共字符串，在这些组件中保留仅用于特定组件的字符串。

---

命名空间 id 也是一种可能。

ui.widget.cycleOffsetSelector.timeCycle.select.label ui.widget.cycleOffsetSelector.timeCycle.tooltip.label

【讨论】：

感谢您的回答。我已经将公共字符串集中到一个共享位置。这是最好的开发方法，而且更容易重构。