将jQuery插件与React

Question

我在我的React App中使用 jQuery nestable plugin 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

React-nestable似乎与jQuery插件具有相同的行为，可以为您节省很多麻烦。将jQuery与React混合在我的体验中非常容易造成麻烦。

Answer 2

这里有一个hacky解决方案：

在Nestable，你有改变事件。因此，您将列表的顺序保持为组件状态，当您拖放元素时，您可以更新状态，并且应该重新呈现列表。

请注意，您可以使用列表元素中的键来优化它。

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