在状态字符串中呈现 html

Question

我使用 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的部分，但结果是一样的。如何让状态中的字符串被渲染？

Answer 1

使用 dangerouslySetInnerHTML 将 HTML 作为字符串注入 React（但请注意，React 将无法在其虚拟 DOM 中使用此标记）：

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

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

API 这样做是故意复杂的，因为这不安全。 React 具有针对 XSS 的保护措施，使用 dangerouslySetInnerHTML 可以规避这些措施，如果您不清理该数据，您将面临风险。

在状态字符串中呈现 html

render html in state string

html

javascript

reactjs