React.js:设置innerHTML vs dangerouslySetInnerHTML

在设置元素的innerHTML和在元素上设置dangerlysetinnerhtml属性之间有什么“幕后”区别吗?假设为了简单起见，我正在正确地消毒。

例子:

var test = React.createClass({
render: function(){
return (
<div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
);
}
});

vs

var test = React.createClass({
componentDidUpdate: function(prevProp, prevState){
this.refs.test.innerHTML = "Hello";
},
render: function(){
return (
<div contentEditable='true' ref='test'></div>
);
}
});

我正在做的事情比上面的例子更复杂一些，但总体思想是相同的

466821 次浏览
小开

基于(dangerouslySetInnerHTML)。

这是你想要的道具。然而，他们命名它是为了传达应该谨慎使用它

小开
最佳答案

是的，有区别!

使用innerHTML和dangerouslySetInnerHTML的直接效果是相同的——DOM节点将使用注入的HTML进行更新。

然而，在幕后，当你使用dangerouslySetInnerHTML时，它让React知道该组件中的HTML不是它关心的东西。

因为React使用了一个虚拟DOM，当它与实际DOM进行比较时，它可以直接绕过检查该节点因为它知道HTML来自另一个来源的子节点。这是性能上的提升。

更重要的是，如果你只是使用innerHTML, React没有办法知道DOM节点已被修改。下次调用render函数时，手动注入它认为该DOM节点的正确状态的React会覆盖内容。

你的解决方案使用componentDidUpdate总是确保内容是同步的，我相信会工作，但在每次渲染期间可能会有一个闪光。

小开

根据危险设置innerHTML，

innerHTML的不当使用可以打开你的一个跨站点 脚本攻击(XSS) < / > 攻击。消毒用户输入以显示是出了名的容易出错， 没有正确的消毒是导致网络的主要原因之一

. internet上的漏洞

我们的设计理念是，让事情变得安全应该是“容易”的， 开发人员应该在执行时明确地说明他们的意图 “不安全”操作。道具名dangerouslySetInnerHTML为 故意选择令人恐惧，道具值(一个对象

.

.

.

.

在充分理解安全后果和正确 清除数据，创建一个只包含密钥的新对象 __html和你的消毒数据作为值。这里有一个例子 使用JSX语法:

function createMarkup() {
return {
__html: 'First &middot; Second'    };
};


<div dangerouslySetInnerHTML={createMarkup()} />

使用下面的链接阅读更多信息:

文档: React DOM元素- dangerlysetinnerhtml。

小开

你可以直接绑定到dom

<div dangerouslySetInnerHTML=\{\{__html: '<p>First &middot; Second</p>'}}></div>
小开

是的，两者之间有区别: dangerouslySetInnerHTML: React差分算法(https://reactjs.org/docs/reconciliation.html)被设计用来忽略在此属性下修改的HTML节点，从而略微提高性能。 如果我们使用innerHTML, React没有办法知道DOM被修改。下一次渲染发生时，React将用它认为正确的DOM节点状态覆盖手动注入的内容。 这就是componentDidUpdate来拯救的地方!< / p >


提交答案