我使用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的部分,但结果是一样的。如何让字符串处于状态?
答案 0 :(得分:26)
使用dangerouslySetInnerHTML
在React中将HTML作为字符串注入(但请注意,React将无法在其虚拟DOM中使用此标记):
<div dangerouslySetInnerHTML={{__html: this.state.output}} />
执行此操作的API故意很复杂,因为这样做是不安全的。 React对XSS有保护,使用dangerouslySetInnerHTML
规避那些并且如果你没有清理那些数据就会使你面临风险。