在 React 中集成 jsPlumb答案

【问题标题】：Integrating jsPlumb in React在 React 中集成 jsPlumb
【发布时间】：2018-09-25 11:40:04
【问题描述】：

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

我需要开源插件，它可以作为 jsPlumb 在 react 和并尝试了以下方法：

我无法使用这些插件，因为这两个插件都是用 TypeScript 编写的。是否有任何其他可用的插件，如 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>
       );
     }
   }

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

【问题讨论】：

你有解决办法吗？如果没有，那么我在答案部分给出解决方案。

标签： reactjs jsplumb

【解决方案1】：

用 React 封装 jQuery 插件并不总是最好的选择。但是，很高兴知道这是一种选择以及如何实施解决方案。如果您要迁移，这是一个可行的选择旧的 jQuery 应用程序到 React 或者你只是找不到适合您的需求的 React 插件。

查看this答案了解详细说明

【讨论】：

【解决方案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"});
});

我在代码沙箱中创建了一个示例：jsPlumb example。代码取自官方来源：jsPlumb demo in github。我只将它们集成到 React 组件中，所以仍然要感谢编写源代码的人。我们只能享受他们为我们的 React 应用程序创造的东西。顺便说一句，我还在学习图书馆。

【讨论】：