javascript - 将 jQuery 插件与 React 集成

Question

我正在使用jQuery 嵌套插件 https://dbushell.com/Nestable/在我的 React 应用程序中。我知道我们在 React 中使用 jQuery 时会出现问题。

jQuery nestable 解决了我的业务需求，在react drag/nestable 组件中找不到确切的需求。所以我使用了这个 jQuery 插件。

真正的问题是:在使用这个 jQuery 插件拖动元素时，它会克隆 DOM，除此之外一切都在响应中。

初始化 jQuery 嵌套功能如下:

componentDidMount() {
    this.$node = $(this.nestable); // this.nestable is a ref

    this.$node.nestable({
        group: 1,
        maxDepth: 4,
        expandBtnHTML:"",
        collapseBtnHTML:""
    });
}

上面的代码将让我将 group2 拖到所有其他 DOM 元素中，如下图所示:

group2 是这里的可拖动元素。

拖动后，我可以看到 group2 出现了两次，我猜 jQuery 插件克隆了拖动的元素，如下所示:

在开发者工具中:

但是在 React 开发者工具中，我可以看到 DOM 是正确的。

我不知道，如何解决这个问题。我无法在此处更新完整代码，因为代码库很大。

在 React 开发者工具中，我可以看到 DOM 是正确的，而在原生 DOM 中则不是!

是否有可能在 setState 之后用虚拟 DOM 替换 native DOM，或者是否有可能对 jQuery 处理的跟踪 DOM 使用react？

我接受 @Patrick Evans 的评论，我在这里寻找解决方案或合适的基于 react 的组件，如 jQuery 可嵌套。

这方面的任何帮助都会有所帮助。

Answer 1

React-nestable似乎与那个 jQuery 插件具有相同的行为，可以为您省去很多麻烦。根据我的经验，将 jQuery 与 React 混合使用非常容易造成问题。