react intl呈现react组件作为formatMessage中的占位符
react intl呈现react组件作为formatMessage中的占位符
提问于 2017-07-24 20:20:52
我有一个组件，它使用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> }}>，而不是正确地呈现。
有人有线索吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-24 21:34:55
对象是因为您的内插link值实际上是一个React b组件，但是需要一个字符串，因此它只是对对象执行toString并输出到插入的link中。
如果您将一个react组件作为一个值传递给它，FormattedMessage会在幕后做一些工作，以便将它保持在呈现的输出中，同时利用作为react组件的所有优点。
然而，injectIntl版本并不代表您执行此操作。
虽然这并不是推荐的方法，因为它混合了范例，并从那时起就失去了反应的所有好处，但是如果您有真正的理由在injectIntl中使用HTML值而不是使用FormattedMessage中的React组件，那么您可以作为最后的手段使用：
this.props.intl.formatHTMLMessage(
{id: 'page.checkout.hint'},
{link: `<b>${this.props.intl.formatMessage({ id: 'page.checkout.hint.hyperlink' })}</b>`}
)这就是差异的原因，但是允许直接使用HTML字符串只是为了支持遗留的支持，所以如果可能的话，应该避免使用HTML字符串。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45289371
复制相关文章
相似问题
腾讯云开发者
