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

Question

我在 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}}
/>

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

Answer 1

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

如果创建 HOC 不可行，这里还有几种方法可以处理此问题:

<小时/>

您可以使用defineMessages()在集中式消息文件中定义您重复使用的通用字符串，并保留仅适用于这些组件中的特定组件的字符串。

<小时/>

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

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