javascript - react-intl 渲染 react 组件作为 formatMessage 中的占位符

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 上执行对象和输出到你插入的 link

FormattedMessage 如果您将 React 组件作为值传递给它，它会在幕后做一些工作，以在呈现的输出中保持原样，从而利用作为 React 组件的所有好处。

但是 injectIntl​​ 版本不会代表您完成这项工作。

虽然这不是推荐的方法，因为它混合了范例并从那以后开始利用了 React 的所有好处，但如果您有真正的理由在 injectIntl​​ 中使用 HTML 字符串值而不是 React值 FormattedMessage 中的组件，您可以作为最后的手段使用:

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

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