在react.js中实现HTML实体解码 [英] Implement HTML Entity Decode in react.js

问题描述

我正在使用来自服务器的API输出文本，并且我有一个管理员，该管理员具有用于填充内容的html字段.这里的问题是现在文本显示为html代码.我如何摆脱那些不受欢迎的html代码.我想我必须使用html实体解码?我将如何在React项目中实现该目标?在下面，您会看到该文本不仅说明了文本和html代码.

I am outputting the text using API from the server, and I have an admin which has the html fields for facilitating filling the content. The issue in here that now the text displaying with html codes. How I can get rid of that undeeded html codes. I guess I have to use html entity decode? How I will implement that in react project? Below you see that the text illustrates not only text and html code.

  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的好方法.

You can use dangerouslySetInnerHTML, but be sure you render only your input, not users. It can be great way to XSS.

使用示例:

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

然后在组件中:

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

这篇关于在react.js中实现HTML实体解码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！