我使用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的部分,但结果是相同的。如何让状态字符串呈现?
使用dangerouslySetInnerHTML注入HTML作为一个字符串做出反应(但请注意,阵营将无法在它的虚拟DOM使用这个标记):
dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: this.state.output}} />
http://jsfiddle.net/5Y8r4/11/
用于执行此操作的API故意复杂,因为常规执行此操作并不安全。React可以针对XSS进行保护,使用dangerouslySetInnerHTML规避措施可以保护您,如果您不对这些数据进行消毒,就会使您面临风险。