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

Question

我有一个组件，它使用 injectIntl-HOC，returns 一条消息

...
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 字符串值在价值 FormattedMessage 的反应组件上，你可以作为最后的手段使用：

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

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

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

react-intl render react component as placeholder in formatMessage

javascript

reactjs

internationalization

react-intl

formatjs