1

我有一个组件，它使用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> }}>正确渲染。

有人有线索吗？

4

1 回答 1

2

该对象是因为您的插值link实际上是一个 Reactb组件，但需要一个字符串，因此它只是toString在对象上执行并输出到您的插值link

FormattedMessage如果您将反应组件作为值传递给它，则在幕后做一些工作，以将其保持在渲染输出中，利用作为反应组件的所有好处。

但是，该injectIntl版本并不能代表您完成这项工作。

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

this.props.intl.formatHTMLMessage(
  {id: 'page.checkout.hint'}, 
  {link: `<b>${this.props.intl.formatMessage({ id: 'page.checkout.hint.hyperlink' })}</b>`}
)

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

于 2017-07-24T21:34:55.803 回答