Question

我有一个组件，在componentDidMount中，为jQuery插件提供了对React呈现的DOM的一些控制。我知道每个人都说＆＃34;除了React之外什么都不会触及DOM＆＃34;但是听我说，因为重新发现这个插件现在是不可行的，我认为应该有一个＆＃34;覆盖你发现的任何东西在DOM＆＃34;切换React我希望有人可以指点我。

更多信息：我设计了它，因此React的DOM的状态完全是根据提供给React 的道具确定的，除了用户拖动东西。一旦删除，我就不关心自上次React更新后DOM的变化，我只想渲染React的当前props中的所有内容，我将在插件上传递change { {1}}处理程序通过ReactDOM.render

症状是插件在拖动过程中和拖动后创建的节点在React被告知更新后不会消失！

是的，节点最初为key。

该插件是Nestable，它增加了交互性（树的拖放重新排序），并且JSBin在这里：http://jsbin.com/qareki/edit?js,console,output

我真的在寻找＆＃34;杀死你找到的任何东西＆＃34;设置。我认为打电话ReactDOM.render会这样做，但显然没有这样做。当然，也不是更多的手术setState，但我并没有期待它。提前感谢所有人“你做错了”＃39;建议和其他修正

Answer 1

在div中手动添加componentDidMount元素，并将其替换为componentDidUpdate中的新元素：

class Foo extends React.Component {
    render() {
      // whatever HTML you want...
      return (
        <div>
          <div>
            {/* this div will contain our non-React stuff that we need to reset */}
            <div ref="container"></div>
          </div>
        </div>);
    }

    blastAndRecreate() {
      // throw away any content within the container and replace it with brand new content
      const container = $(this.refs.container).empty();
      const newDIV = $("<div>").appendTo(container);

      // give this new DIV to nestable plugin
      newDIV.nestable(...);
    }

    componentDidMount() {
      this.blastAndRecreate();
    }

    componentDidUpdate() {
      this.blastAndRecreate();
    }
}

如何让React替换（不合并）VDOM？

1 个答案: