在状态字符串中呈现html

Question

我使用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的部分,但结果是一样的.如何让字符串处于状态？

Answer 1

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

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

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

执行此操作的API故意很复杂,因为这样做是不安全的.React对XSS提供了保护,dangerouslySetInnerHTML如果你没有对那些数据进行消毒,那么就可以使用它来规避那些并使你面临风险.