在React中集成jsPlumb

Question

需要在react中实现jsPlumb，我已经分析了与react集成的jsPlumb是经过许可的ReactjsPlumb。

我需要在react中作为jsPlumb的开源插件，并尝试了以下内容：

jsplumb-react，

react-dag。

我无法使用这些插件，因为这两个插件都是用TypeScript编写的。在react中是否有其他插件可以使用纯react功能，比如jsPlumb。

不知何故，在react中添加了jsPlumb社区版本，如下所示：

class App extends Component {
     componentDidMount() {

       //later we use like that , is this recommended ?

       // $(".item").resizable({
       //     resize : function(event, ui) {            
       //             jsPlumb.repaint(ui.helper);
       //         },
       //         handles: "all"
       //     });

        jsPlumb.ready(function() {
               jsPlumb.connect({
                   source:"item_left",
                   target:"item_right",
                   endpoint:"Rectangle"
               });

               jsPlumb.draggable("item_left", {containment:"parent"});
               jsPlumb.draggable("item_right", {containment:"parent"});
           });
     }

     render() {
       return (
         <div id="diagramContainer">
           <div id="item_left"  className="item"></div>
           <div id="item_right" className="item" 
           style={{marginLeft:"150px"}}></div>
       </div>
       );
     }
   }

我不知道，使用jsPlumb (javascript + jQuery)和react将是一个更明智的选择，因为jsPlumb在内部处理拖放，而直接处理DOM。React是different.This感觉像是一个死锁...有什么建议吗？

Answer 1

使用React包装jQuery插件并不总是最佳选择。然而，很高兴知道这是一种选择，以及如何实现解决方案。如果您正在将遗留的jQuery应用程序迁移到React，或者您可能只是找不到适合您需要的React插件，那么这是一个可行的选择。

有关详细说明，请查看this answer

Answer 2

当尝试在我的React应用程序中使用该库时，通过查看控制台，我发现jsPlumb变量是一个具有多个属性的对象。其中一个属性是jsPlumb本身。所以我认为，每次我们需要访问jsPlumb和它的方法/属性时，我们必须像这样编写代码：

jsPlumb.jsPlumb.ready(function() {
    jsPlumb.jsPlumb.connect({
        source:"item_left",
        target:"item_right",
        endpoint:"Rectangle"
    });

    jsPlumb.jsPlumb.draggable("item_left", {containment:"parent"});
    jsPlumb.jsPlumb.draggable("item_right", {containment:"parent"});
});

我在codesandbox中创建了一个示例：jsPlumb example。代码取自官方来源：jsPlumb demo in github。我只在React组件中集成了它们，所以功劳仍然属于那些编写源代码的人。我们只能享受他们为我们的React应用程序创建的内容。顺便说一句，我还在学习这个库。