在状态字符串中呈现 html

IT技术 javascript html reactjs
2021-02-18 18:14:43

我使用 setState 来更新 html 的一部分,但我发现没有呈现新的更新 html。这是代码,js小提琴

html:

<div>hello<br />world<br /></div>
<div id='content'></div>

js:

var Main = React.createClass({
    getInitialState: function() {
        return {output: 'hello<br />world<br />'};
      },
    render: function() {
        return (
            <div>           
                {this.state.output}
            </div>
        );
        }
});

React.renderComponent(<Main/>, document.getElementById('content'));

我省略了从服务器更新 html 的部分,但结果是一样的。如何让处于状态的字符串被呈现?

1个回答

用于dangerouslySetInnerHTML在 React 中将 HTML 作为字符串注入(但请注意,React 将无法在其虚拟 DOM 中使用此标记):

<div dangerouslySetInnerHTML={{__html: this.state.output}} />

http://jsfiddle.net/5Y8r4/11/

用于执行此操作的 API 故意复杂,因为常规执行此操作并不安全。React 具有针对 XSS 的保护措施,使用可以dangerouslySetInnerHTML绕过这些保护措施,并且如果您不清理该数据,则将面临风险。

清理此 html 的最佳方法是什么?
2021-04-17 18:14:43
这样可行。谢谢。还有一个问题,这是一种常见做法还是最佳做法?
2021-04-24 18:14:43
存储 HTML 并不常见,但有时是必要的(例如,您在服务器上根据用户数据生成安全的 HTML,例如对堆栈溢出的评论,并且需要呈现它)。
2021-05-02 18:14:43