React組件在重新渲染時會忽略動態元素

Question

我已經開發了帶有三個div元素的react組件，如下所示。

render: function(){
    return (
    <div id="div_1">
        <div id="div_2"></div>
        <div>
            Click the below button
            <a href="#">Click here</a>
        </div>
    </div>
    );
})

在運行時，使用jquery在“ div_2” div中插入一些元素，如下所示。

componentDidMount: function(){
    //Invoking global function, which is outside react
    window.loadView();
}

我的加載視圖方法如下所示，

function loadView(){
   $('#div_2').html('//my elements')
}

現在讓我驚訝的是，當我更改我的react組件的狀態時，視圖正在重新渲染，但是“ div_2”中的內容仍然不受干擾。 有人可以說為什么這樣做嗎？

Answer 1

React有自己的DOM虛擬副本，隱藏在某個地方。 當狀態從狀態A更改為狀態B時，React使用此方法僅在更新DOM時發揮作用。

在您的示例中，React無法<div 2>您使用jQuery對<div 2>所做的更改。 因此，據React所知， <div 2>保持不變，因此React不會對其進行更新。

我強烈建議不要混合React和jQuery來更新組件 。 如果您想使代碼易於管理，請給React獨家壟斷以更新DOM。

在您的情況下，我建議讓React只管理內部部分，如下所示：

render: function(){
    return (
      <div>
        Click the below button
        <a href="#">Click here</a>
      </div>
    );
})

在您的HTML中：

<div id="div_1">
    <div id="div_2"></div>
    <div id="react-only domain"></div>   // mount your ReactDOM here
</div>

Answer 2

在這種情況下，應使用componentDidUpdate而不是componentDidMount 。