reactjs – 在react.js中实现HTML实体解码

发布时间：2020-12-15 05:04:38 所属栏目：百科来源：网络整理

导读：我正在使用来自服务器的API输出文本,并且我有一个管理员,其中包含用于促进填充内容的html字段.这里的问题是现在文本显示的是html代码.我如何摆脱那些未知的 HTML代码.我想我必须使用html实体解码？我将如何在反应项目中实施？下面你看到文本不仅说明了文本和

我正在使用来自服务器的API输出文本,并且我有一个管理员,其中包含用于促进填充内容的html字段.这里的问题是现在文本显示的是html代码.我如何摆脱那些未知的 HTML代码.我想我必须使用html实体解码？我将如何在反应项目中实施？下面你看到文本不仅说明了文本和HTML代码.

export  class FullInfoMedia extends React.Component {
    render() {
        const renderHTML = (escapedHTML: string) => React.createElement("div",{ dangerouslySetInnerHTML: { __html: escapedHTML } });

        return (
            <div>
                <div className="about-title">
                    <div className="container">
                        <div className="row">
                            <img className="center-block" src={this.props.about.image}/>

                            <h2>{this.props.about.title}</h2>
                            {renderHTML(<p>{this.props.about.body}</p>)} 
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

您可以使用dangerouslySetInnerHTML,但请确保仅渲染输入,而不是用户.它可以是XSS的好方法.

使用示例：

const renderHTML = (rawHTML: string) => React.createElement("div",{ dangerouslySetInnerHTML: { __html: rawHTML } });

然后在一个组件中：

{renderHTML("<p>&amp;nbsp;</p>")}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!