Question

我开发了一个带有三个div元素的反应组件，如下所示。

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将几个元素插入＆＃34; div_2＆＃34;如下所示。

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

我的加载视图方法看起来像下面的内容，

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

令我惊讶的是，当我更改反应组件的状态时，视图将被重新渲染，但不知何故，内容在＆＃34; div_2＆＃34;保持不受干扰。有人能说出这种行为的原因吗？

Answer 1

React有自己的DOM虚拟副本，隐藏在某个地方。当某些东西从状态A变为状态B时，React使用它来发挥其魔力只是更新DOM。

在您的示例中，React不知道您使用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。

React组件在重新渲染时忽略动态元素

2 个答案: