Question

我正在使用来自服务器的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>
        );
    }
}

Answer 1

您可以使用dangerouslySetInnerHTML，但请确保只渲染您的输入，而不是用户。这可能是XSS的好方法。

使用示例：

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

然后在一个组件中：

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

Answer 2

即使您可以使用dangerouslySetInnerHTML，这也不是一个好习惯，正如Marek Dorda所述，这对于使您的应用XSS容易受到攻击是一件好事。

更好的解决方案是使用he库。 https://github.com/mathiasbynens/he

这将是您的组件外观如何的一个示例。

import he from 'he'

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>
                            { he.decode(this.props.about.body) }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

此外，如果这是我的代码库，则很可能会将解码移至API调用，并且在组件中仅使用来自商店的值

Answer 3

您可以简单地尝试一下，它会解码文本然后显示。

<p dangerouslySetInnerHTML={{__html:"&amp;nbsp;"}}/>

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

3 个答案: