在流星中轉義html標簽

Question

我有以下反應成分

homeComponent = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            homeData: homeContent.findOne()
        }
    },
    render(){
        let homeData = this.data.homeData;
        return (
            <div className="units-container home-container">
                <h1>ply</h1>
                <p>{homeData.homeCopy}</p>
                <a href="{homeData.downloadLink}" className="btn home-button">Download</a>
            </div>
        )
    }
})

鍵{homeData.homeCopy}返回一個帶有html標簽的字符串。因此，在這種情況下，我們說它返回的是<strong>bold text</strong> not bold text.

我正在使用react-template-helper來同時使用blaze和react，所以我希望可以使用三括號來轉義html，但這是行不通的。 我需要逃避html的反應。

我如何做出反應以從字符串中兌現這些html標簽？

Answer 1

@ mason505指出了正確的方向，但是我認為這需要一些額外的信息。

首先，您必須創建一個函數來解析html：

function escapeHTML(data) {
    return {__html: data}
}

然后，你必須調用與dangerouslySetInnerHTML但只有一個自我封閉的HTML元素，你必須將數據傳遞到dangerouslySetInnerHTML使用escapeHTML功能。 完整的示例是：

function escapeHTML(data) {
    return {__html: data}
}

homeComponent = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            homeData: homeContent.findOne()
        }
    },
    render(){
        let homeData = this.data.homeData;

        return (
            <div className="units-container home-container">
                <h1>ply</h1>
                <p dangerouslySetInnerHTML={escapeHTML(homeData.homeCopy)} />
                <a href={homeData.downloadLink} className="btn home-button">Download</a>
            </div>
        )
    }
})