反應，國際反應呈現組件作爲佔位符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> }}>反而呈現正確。

有沒有人有線索？

來源

2017-07-24 dnepro

目的是因爲你的插值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字符串直接是唯一真正支持遺留系統，所以如果可能的話，應儘量避免

來源

2017-07-24 21:34:55 alechill

反應，國際反應呈現組件作爲佔位符FORMATMESSAGE

回答

相關問題