小编典典

在状态字符串中呈现html

reactjs

我使用setState更新html的一部分,但发现未呈现新的更新html。这是js
fiddle
代码:

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的部分,但结果是相同的。如何让状态字符串呈现?


阅读 270

收藏
2020-07-22

共1个答案

小编典典

使用dangerouslySetInnerHTML注入HTML作为一个字符串做出反应(但请注意,阵营将无法在它的虚拟DOM使用这个标记):

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

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

用于执行此操作的API故意复杂,因为常规执行此操作并不安全。React可以针对XSS进行保护,使用dangerouslySetInnerHTML规避措施可以保护您,如果您不对这些数据进行消毒,就会使您面临风险。

2020-07-22