Question

我正在学习ReactJS和Node / Express生态系统（我的早期生活）。我有一个基本的ReactJS文件，包括组件定义和渲染调用。它可以按预期工作。为了快速/轻松地进行调试，昨天我在客户端代码中进行了以下更改：

// Added HTML id to body tag, no other changes whatsoever to DOM/HTML
<body id='body'>...</body>

// In client code, added:
document.getElementById('body').innerHTML += xhr.responseText;

xhr是经过验证的功能性xmlHttpRequest（）。我发出请求，得到一个响应，并按预期呈现给身体。但是，此会停止所有ReactJS组件监听其按钮并按定义触发其处理程序。没有控制台反馈或其他任何错误的迹象，ReactJS只是按预期进行了第一次渲染，然后默默地停止响应。

如果我注释掉单行document.getEle...，那么一切都会重新开始，包括React和xhr本身。

我知道在ReactJS中，范例不是以这种方式修改DOM，但我不明白为什么这一行会破坏所有ReactJS功能。对于上下文，这是我的代码的一部分：

无论是否有document.getEle ...此组件都显示正常。

// Hello World component: manage cookies and display a simple prop
var HelloWorldComponent = React.createClass({

  componentWillMount: function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if( xhr.readyState == 4 && xhr.status == 200 ) {
        // NOTE: this `console.log` gives expected result regardless
        console.log('Performed initial cookie check.  Got response: ' + xhr.responseText);
        // document.getElementById('body').innerHTML += '<div>'+xhr.responseText+'</div>';
      }
      else {
        console.log('Tried initial cookie check.  Got HTTP response status: ' + xhr.status);
      }
    }
    xhr.open('POST', '/cookieCheck');
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.send();
  },

  render: function() {
    return (
      <h1 id='italic-id' className='red-class'>Hello, {this.props.name}!</h1>
    );
  }
});

除非 document.getEle...被注释掉，否则此组件会中断，否则它会完美运行。

// State component to display simple state var StateComponent = React.createClass({ // ReactJS Event: this fails with `document.getEle...` appearing elsewhere in the code incrementCount: function() { this.setState({ count: this.state.count + 1 }); }, getInitialState: function() { return { count: 0 } }, render: function() { return ( <div className='increment-component'> <h3 className='red-class'>Count: {this.state.count}.</h3> <button onClick={this.incrementCount}>Boing!</button> </div> ); } });

以下是我如何渲染我的组件：

ReactDOM.render( <StateComponent/>, document.getElementById('state-point') ); // similar calls for other components as needed

为了它的价值，我已经尝试了document.getEle...作为第一个被解雇的JS，就像最后一个JS被解雇一样，并且你现在看到它是ReactJS组件的一部分。无论我把它放在代码中的哪个位置，结果都是一样的。

Answer 1

我认为原因在于innerHTML的工作原理。它完全重新解析和替换子DOM节点（即使你使用+ =只是追加新节点），所以它会破坏之前附加到那些DOM节点的所有事件处理程序，在你的情况下是DOM子树＆＃34;管理＆＃34;通过React。对于您的情况，您可能需要考虑使用insertAdjacentHTML。

来自MDN文档（https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML）：

＆＃34;它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。＆＃34;

尝试以下方法：

document.getElementById('body').insertAdjacentHTML('beforeend', xhr.responseText);

DOM上的手动innerHTML修改会停止ReactJS侦听器

1 个答案: