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

发布时间：2020-12-15 20:12:38 所属栏目：百科来源：网络整理

导读：我在react-intl文档(我正在使用v2分支)中找不到关于这种用法的任何内容,因此这个问题.以下用例是否有推荐的方法？假设我有2个组件,Tooltip和Select.两者都需要相同的i18n格式字符串,例如： FormattedMessage id='ui.widget.cycleOffsetSelector.timeCycle.l

我在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声称要解决这个问题.

解决方法

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

如果创建HOC不是一个选项,那么还有一些方法可以解决此问题：

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

命名空间ID也是一种可能性.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!