IT技术 - 在 react.js 中实现 HTML 实体解码 - 吾爱随笔录

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

IT技术 reactjs html-entities

2021-04-14 06:06:02

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

3个回答

您可以使用dangerouslySetInnerHTML，但请确保仅呈现您的输入，而不是用户。它可能是 XSS 的好方法。

使用示例：

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

然后在一个组件中：

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

对我来说，这个代码危险地工作SetInnerHTML={{__html: this.props.about.body}}

2021-05-28 06:06:02

所以，例如代码应该看起来像上面的代码。我刚刚添加，请您查看

2021-06-01 06:06:02

renderHTML 函数的输入必须是字符串，而不是对象。您正在致电<p>...</p>，但您需要致电"<p>...</p>"（带引号）。

2021-06-01 06:06:02

但现在它只呈现单词“[object Object]”

2021-06-03 06:06:02

我想你this.props.about.body是字符串，所以{renderHTML(this.props.about.body)}你应该使用它。如果您的 props 不是字符串，则需要对其进行转换。

2021-06-16 06:06:02

即使你可以使用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 调用，并且在组件中只使用来自商店的值

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

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

其它你可能感兴趣的问题

上一篇我可以在 react-native 中使用 reactJS 库吗？下一篇如何更改 Material UI React 输入组件的轮廓颜色？