Question

我有一个使用injectIntl - HOC的组件，并返回一条消息

...
return (
  <Message>
    {intl.formatMessage({
      id: 'page.checkout.hint'
    }, {
      link: <b>{intl.formatMessage({ id: 'page.checkout.hint.hyperlink' })}</b>
    })}
  </Message>
)
...

我的语言文件如下：

...
"page.checkout.hint": "You're going to be redirected automatically. If nothing happens, please click {link}",
"page.checkout.hint.hyperlink": "here",
...

结果为： You're going to be redirected automatically. If nothing happens, please click [object Object] 。

如果我使用<FormattedMessage id="page.checkout.hint" values={{ link: <b>{intl.formatMessage({ id: 'page.checkout.hint.hyperlink' })}</b> }}>代替正确呈现。

有人有线索吗？

Answer 1

该对象是因为您的插值link值实际上是React b组件，但是期望一个字符串，因此它只对对象执行toString并输出到您内插{{} 1}}

如果你将一个反应组件作为一个值传递给它，那么

link会在幕后做一些工作，以便在渲染输出中保留它，充分利用作为反应组件的所有好处。

但FormattedMessage版本并不代表您执行此操作。

虽然它不是推荐的方法，因为它混合了范例并从那一点起将React的所有好处带走了，如果你有真正的理由在injectIntl中使用HTML字符串值而不是反应组件的值injectIntl您可以作为最后的手段使用：

FormattedMessage

这就是造成差异的原因，但是直接允许HTML字符串只能用于遗留支持，所以如果可能的话应该避免使用

react-intl render将component作为formatMessage中的占位符

1 个答案: