Meteor React中的转义HTML标签

escaping html tags in meteor react

本文关键字：HTML 标签 转义 React Meteor      更新时间：2023-09-26

我有以下反应组件

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 标签？

@mason505指出了正确的方向，但我认为这需要一些额外的信息。

首先，您必须创建一个函数来解析 html：

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

然后，您必须使用 dangerouslySetInnerHTML 调用它，但只能在自封闭的 html 元素上调用它，并且您必须使用 escapeHTML 函数将数据传递到dangerouslySetInnerHTML中。完整的示例是：

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>
        )
    }
})
相关文章：