将jQuery插件与React集成

Question

我在我的React App中使用jQuery可嵌套插件 https://dbushell.com/Nestable/.我知道在React中使用jQuery时会出现问题.

jQuery nestable解决了我的业务需求,无法找到反应拖动/嵌套组件的确切要求.所以我使用了这个jQuery插件.

真正的问题是:在使用这个jQuery插件拖动一个元素时,它会克隆DOM,除此之外一切都在做出反应.

初始化了jQuery可嵌套功能,如下所示:

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

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

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

group2是这里的可拖动元素.

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

在开发人员工具中:

但在反应开发人员工具中,我可以看到DOM是正确的.

我不知道,如何纠正这个问题.我无法在此更新完整代码,因为代码库很大.

在反应开发工具中,我可以看到DOM是正确的,而在原生DOM中则不行!

是否可以在setState之后用虚拟DOM替换原生DOM,或者是否可以对jQuery处理的跟踪DOM做出反应？

我接受@ Patrick Evans的评论,我正在寻找这里的解决方案或者像jQuery nestable这样的基于反应的组件.

对此有任何帮助将有所帮助.

Answer 1

这里有一个 hacky 解决方案：

在 Nestable 中，您有更改事件。因此，您可以将列表的顺序保留为组件的状态，并且在拖放元素时可以更新状态，并且应该重新渲染列表。

请注意，您可以使用列表元素中的 key 来对其进行一些优化。

我相信这会解决您的问题。