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

Question

我正在使用 API 从服务器输出文本，我有一个管理员，其中有 html 字段以方便填写内容。这里的问题是现在显示的文本带有 html 代码。我怎样才能摆脱那些不切实际的 html 代码。我想我必须使用 html 实体解码？我将如何在 React 项目中实现它？下面你看到文字说明的不仅仅是文字和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 实体解码

Implement HTML Entity Decode in react.js

html-entities

reactjs