javascript - 在 React 中修改并重新渲染 DOM 结构时出现意外行为

Question

我有以下使用 React 构建的代码。

<div id="wrapper">
    <form onSubmit={this.handleSubmit}>
        <div id="content">
            .....
        </div>          
    </form>               
</div>

在这里，第三方库会定期更新DIV#content。但是，在提交表单时，我可以使用代码中的另一个 DIV 来包装 DIV#content 。提交修改后请查看如下:

<div id="wrapper">
    <form onSubmit={this.handleSubmit}>
        <div id="contentWrapper">
            <div id="content">
                .....
            </div>
        </div>          
    </form>               
</div>

但是一旦 DIV#content 被另一个 DIV 包装，第三方库就会停止工作。谁能告诉我为什么一旦 DOM 结构被修改，它就会停止更新 DIV#content，尽管 DIV#content 元素仍然可用于库。

注意:React 不会抛出任何有关 DOM 结构更改的错误，只是库停止工作。

[编辑]:这是我使用 React 渲染的方式

render() {
  var returnIt;
  if (useDivOne) returnIt = (<div id='initial'></div>);
  else returnIt = (<div id='modified'></div>);
  return (returnItj);
}

Answer 1

当 React 渲染时，它不会重新使用旧的 DOM 元素。因此，你的库仍然拥有对旧 DOM 引用的引用，而不是 React 重新渲染时重新创建的新 DOM 引用。由于您的库尚未准备好 react ，因此您可以通过一种迂回的方式来做到这一点，通过保证您传递给库的 dom 元素永远不会被重新创建:

componentDidUpdate() {
    // this makes sure yourDiv is ALWAYS visible inside your
    // component
    if(!this.yourDiv.parentNode) {
        this.refs.libContainer.appendChild(this.yourDiv);
    }
}

render() {

    // you will pass a reference to yourDiv to your library and it will
    // refer to that. YourDiv is NEVER re-created so this DOM element
    // lives forever and your library remains happy
    if(!this.yourDiv) {
        this.yourDiv = document.createElement('div');
        this.yourDiv.className = 'specialDiv';
        this.yourDiv.innerHTML = 'hahahaa';
    }
    return <div ref="libContainer"></div>;
    // .... or sometimes return this
    return <div className="wrapper"><div ref="libContainer"></div></div>;
}

并且您将向您的库传递对 .specialDiv 的引用 - 请注意，我们在这里完全跳过了 React 渲染 DOM 的方式，并且这种方法只有在修复 React 的问题时才真正可行正在干扰你想要完成的事情 - 所以如果你实现这个，我建议创建一个新的 react 组件作为你的库的包装器，以便使库 react 友好的所有“丑陋”都可以包含在 1 个组件中。