将jQuery插件与React集成 [英] Integrating jQuery plugin with React

问题描述

我正在使用 jQuery可嵌套插件

group2是此处的可拖动元素。

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

和开发者工具中：

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

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

在反应开发人员工具中，我可以看到DOM是正确的，在本机DOM中是不!!

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

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

任何有关这方面的帮助都将是很有帮助。

解决方案

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

I'm using jQuery nestable plugin https://dbushell.com/Nestable/ in my React App. I know that there will be problems when we use jQuery in React.

jQuery nestable solves my business needs, can't find the exact requirements in react drag/nestable components. So I have used this jQuery plugin.

The real problem is : while dragging an element by using this jQuery plugin, it clones the DOM, apart from this everything is in react.

Initialized the jQuery nestable functionality like below:

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

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

the above code will let me drag the group2 among all other DOM elements like below image:

group2 is the draggable element here.

after dragged, I can see that group2 apperaed twice and I guess jQuery plugin clones the dragged element like below:

and in developer tools :

But In react developer tools, I can see that DOM is correct.

I don't know, how to rectify this problem. I'm unable to update the full code here because the code base is large.

In react developer tools, I can see that DOM is correct, and in native DOM is not !!

Is it possible to replace native DOM by virtual DOM after setState or is it possible for react to trace DOM handled by jQuery ?

I accept @ Patrick Evans comments, I'm looking for a solution here or suitable react based component like jQuery nestable.

Any help on this will be helpful.

解决方案

React-nestable seems to have the same behavior as that jQuery plugin and could save you a lot of trouble. Mixing jQuery with React is super easy to cause trouble in my experience.

这篇关于将jQuery插件与React集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！