Question

我有一个来自后端的名为article的对象。它包含id，title和description。 description包含HTML数据，我希望通过浏览器将其解析为HTML代码，但浏览器会将其视为文本。所以，我想知道为什么。以及如何让浏览器将其解析为HTML？

interface BodyComponentProps {
    name: string;
    article: article;
}

class BodyComponent extends React.Component<BodyComponentProps> {

    public render() {
        const art = this.props.article;

        return (
            /* <!-- Main container --> */
            <nav className="level body-container">
                {/* <!-- Left side --> */}
                <div className="level-left">
                    <div className="level-item">
                        <nav className="panel content-block">
                            <p className="panel-heading">{art.title}</p>
                            <div className="panel-block">{art.description}</div>
                        </nav>
                    </div>
                </div>

                {/* <!-- Right side --> */}
                <div className="level-right">
                    <div className="level-item sidebar-item">
                        <SidebarPanel title={this.props.name}/>
                    </div>
                </div>
            </nav>
        );
    }
}

const mapStateToProps = (state: NahjReduxState) => ({
    article: state.content.article,
});

export default connect(mapStateToProps)(BodyComponent);

Answer 1

出于安全原因，React将其视为文本，而不是HTML。允许从后端插入HTML意味着您要打开网站以进行跨站点脚本编写（XSS - https://en.wikipedia.org/wiki/Cross-site_scripting）。跨站点脚本（XSS）意味着恶意脚本可以被其他人注入您的网站。

但是，如果您真的想这样做，可以使用dangerouslySetInnerHtml道具。 dangerouslySetInnerHtml要求您使用键__html传递对象（请注意双下划线），值为您要呈现的HTML。

示例：

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

React dangerouslySetInnerHtml docs

如何正确显示动态HTML？

1 个答案: