Question

设置元素的innerHTML与在元素上设置dangerouslySetInnerHTML属性有什么“幕后”的区别吗？假设我为了简单起见正确地清理了东西。

示例：

ValueError

VS

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

我做的事情比上面的例子复杂一点，但整体想法是相同的

Answer 1

是的，有区别！

使用innerHTML与dangerouslySetInnerHTML的直接影响相同 - DOM节点将使用注入的HTML进行更新。

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

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

更重要的是，如果您只是使用innerHTML，则React无法知道DOM节点是否已被修改。下次调用render函数时， React将覆盖手动注入的内容，并认为该DOM节点应该是正确的状态。

使用componentDidUpdate始终确保内容同步的解决方案我认为可行，但每次渲染时可能会有闪光。

Answer 2

根据Dangerously Set innerHTML，

不当使用innerHTML可能会使您陷入cross-site scripting (XSS) 攻击。众所周知，对用户输入进行显示处理很容易出错，未能正确消毒是网络的主要原因之一互联网上的漏洞。

我们的设计理念是使事物安全应该“容易”，开发人员在执行时应明确说明其意图 “不安全”操作。道具名称dangerouslySetInnerHTML为故意选择要吓人的，道具价值（一个物体而不是字符串）可用于表示已清理的数据。

充分了解安全后果后，清理数据，创建仅包含密钥的新对象 __html，并将您清理过的数据作为值。这是一个例子使用JSX语法：

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

<div dangerouslySetInnerHTML={createMarkup()} />

使用以下链接阅读有关此内容的更多信息：

文档：React DOM Elements - dangerouslySetInnerHTML。

Answer 3

您可以直接绑定到dom

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

Answer 4

基于https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

它是一个完全符合你想要的道具。然而，他们将其命名为传达它应该谨慎使用

Answer 5

在危险地设置InnerHtml上使用innerHTML的一个原因是避免跨站点脚本攻击。当您使用innerHTML时内容会被转义，而react不会在使用危险地设置InnerHtml时转义内容

React.js：设置innerHTML与dangerouslySetInnerHTML

5 个答案: