React.js：设置 innerHTML 与 dangerouslySetInnerHTML

Question

设置元素的 innerHTML 与设置元素的 dangerouslySetInnerHTML 属性有什么 "behind the scenes" 区别吗？假设为了简单起见，我正在对事物进行适当的消毒。

示例：

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

对

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

我做的事情比上面的例子复杂一点，但总体思路是一样的

Answer 1

基于（dangerouslySetInnerHTML）。

这是一款完全符合您要求的道具。然而他们命名它是为了传达它应该谨慎使用

Answer 2

是的，有区别！

使用 innerHTML 与 dangerouslySetInnerHTML 的直接效果是相同的——DOM 节点将使用注入的 HTML.

进行更新

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

因为 React 使用虚拟 DOM，当它去比较 diff 和实际 DOM 时，它可以直接绕过检查那个节点 children [=28] =]因为它知道 HTML 来自另一个来源。所以有性能提升。

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

您使用 componentDidUpdate 始终确保内容同步的解决方案我相信会奏效，但在每次渲染期间可能会出现闪光。

Answer 3

根据Dangerously Set innerHTML，

Improper use of the innerHTML can 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 dangerouslySetInnerHTML is 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 __html and your sanitized data as the value. Here is an example using the JSX syntax:

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

<div dangerouslySetInnerHTML={createMarkup()} />

使用以下 link 阅读更多相关信息：

文档：React DOM Elements - dangerouslySetInnerHTML.

Answer 4

您可以直接绑定到dom

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

Answer 5

是的，两者是有区别的b/w： dangerouslySetInnerHTML：React diffing算法（https://reactjs.org/docs/reconciliation.html）旨在忽略在此属性下修改的HTML节点，从而略微提高性能。如果我们使用 innerHTML，React 无法知道 DOM 被修改了。下次渲染发生时，React 将用它认为 DOM 节点的正确状态覆盖手动注入的内容。这就是 componentDidUpdate 来拯救的地方！

React.js：设置 innerHTML 与 dangerouslySetInnerHTML

React.js: Set innerHTML vs dangerouslySetInnerHTML

html

javascript

innerhtml

reactjs