反应，国际反应呈现组件作为占位符FORMATMESSAGE

问题描述：

我有一个组件，它使用injectIntl -HOC，并返回一个消息反应，国际反应呈现组件作为占位符FORMATMESSAGE

... 
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> }}>反而呈现正确。

有没有人有线索？

答

目的是因为你的插值link值实际上是一个阵营b组成部分，但期待一个字符串，因此它根本toString在对象上，并输出到你插值link

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

但injectIntl版本不代表您的工作。

虽然这不是推荐的方法，因为它混合模式和需要作出反应，从该点离起，如果你有在价值FormattedMessage，你可以在一个反应成分injectIntl使用HTML字符串值真正原因的所有优点作为最后的手段使用：

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

那这种差异的原因，但允许HTML字符串直接是唯一真正支持遗留系统，所以如果可能的话，应尽量避免

反应，国际反应呈现组件作为占位符FORMATMESSAGE

相关推荐