Question

需要在react中实现jsPlumb，我分析了带有react集成的jsPlumb已获得许可ReactjsPlumb。

我需要开源插件，该插件在react和并尝试了以下方法：

由于两个插件均以TypeScript编写，因此我无法使用这些插件。是否有其他可用的插件（如jsPlumb）与纯React功能一起使用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是不同的。这感觉就像是一个僵局...有什么建议吗？

Answer 1

用React包装jQuery插件并不总是最好的选择。但是，很高兴知道这是一个选择以及如何实现实施解决方案。如果您要迁移一个旧版jQuery应用程序添加到React或也许您找不到满足您的情况的React插件。

检查this答案以获取详细说明

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"});
});

我已经在codeandbox中创建了一个示例：jsPlumb example。该代码取自官方资料：jsPlumb demo in github。我只将它们集成在React组件中，因此仍然值得那些编写源代码的人使用。我们只能在React应用程序中享受它们的创建。顺便说一句，我还在学习图书馆。

将jsPlumb集成到React中

2 个答案: