Javascript React.js：设置innerHTML 与危险的SetInnerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37337289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js: Set innerHTML vs dangerouslySetInnerHTML
提问by Jshoe523
Is there any "behind the scenes" difference from setting an element's innerHTML vs setting the dangerouslySetInnerHTML property on an element? Assume I'm properly sanitizing things for the sake of simplicity.
设置元素的innerHTML 与在元素上设置危险的SetInnerHTML 属性有什么“幕后”区别吗？假设为了简单起见，我正在对事物进行适当的消毒。
Example:
例子：
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>
);
}
});
I'm doing something a bit more complicated than the above example, but the overall idea is the same
我正在做一些比上面的例子更复杂的事情，但总体思路是一样的
回答by Francis John
Yes there is a difference!
是，有一点不同！
The immediate effect of using innerHTMLversus dangerouslySetInnerHTMLis identical -- the DOM node will update with the injected HTML.
使用innerHTMLvs的直接效果dangerouslySetInnerHTML是相同的——DOM 节点将使用注入的 HTML 进行更新。
However, behind the scenes when you use dangerouslySetInnerHTMLit lets React know that the HTML inside of that component is not something it cares about.
然而，当你使用dangerouslySetInnerHTML它时，在幕后让 React 知道该组件内部的 HTML 不是它关心的东西。
Because React uses a virtual DOM, when it goes to compare the diff against the actual DOM, it can straight up bypass checking the children of that node because it knows the HTML is coming from another source. So there's performance gains.
因为 React 使用虚拟 DOM，当它比较 diff 与实际 DOM 时，它可以直接绕过检查该节点的子节点，因为它知道 HTML 来自另一个源。所以有性能提升。
More importantly, if you simply use innerHTML, React has no way to know the DOM node has been modified. The next time the renderfunction is called, React will overwrite the contentthat was manually injected with what it thinks the correct state of that DOM node should be.
更重要的是，如果只是简单的使用innerHTML，React 是没有办法知道 DOM 节点被修改的。下次render调用该函数时，React 将用它认为该 DOM 节点的正确状态应该是什么来覆盖手动注入的内容。
Your solution to use componentDidUpdateto always ensure the content is in sync I believe would work but there might be a flash during each render.
您componentDidUpdate用于始终确保内容同步的解决方案我相信会起作用，但在每次渲染期间可能会出现闪光。
回答by Jason
Based on (dangerouslySetInnerHTML).
基于（危险的SetInnerHTML）。
It's a prop that does exactly what you want. However they name it to convey that it should be use with caution
这是一个完全符合您要求的道具。然而，他们命名它是为了表达应该谨慎使用它
回答by Ganesh Sanap
According to Dangerously Set innerHTML,
Improper use of the
innerHTMLcan open you up to a cross-site scripting (XSS)attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.Our design philosophy is that it should be "easy" to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name
dangerouslySetInnerHTMLis intentionally chosen to be frightening, and the prop value (an object instead of a string) can be used to indicate sanitized data.After fully understanding the security ramifications and properly sanitizing the data, create a new object containing only the key
__htmland your sanitized data as the value. Here is an example using the JSX syntax:
不当使用
innerHTML可能会导致跨站点脚本 (XSS)攻击。众所周知，清理用于显示的用户输入容易出错，而未能正确清理是导致 Internet 上 Web 漏洞的主要原因之一。我们的设计理念是让事情变得安全应该是“容易”的，开发人员在执行“不安全”操作时应该明确说明他们的意图。道具名称
dangerouslySetInnerHTML被故意选择为令人恐惧，道具值（一个对象而不是字符串）可用于指示已清理的数据。在充分了解安全后果并正确
__html清理数据后，创建一个仅包含密钥和清理数据作为值的新对象 。下面是一个使用 JSX 语法的例子：
function createMarkup() {
return {
__html: 'First · Second' };
};
<div dangerouslySetInnerHTML={createMarkup()} />
Read more about it using below link:
使用以下链接阅读更多信息：
documentation: React DOM Elements - dangerouslySetInnerHTML.
