JsPlumb在react的使用方法及介绍

1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/           ———    一个翻译一半就不能打开的文档

2.https://github.com/wangduanduan/jsplumb-chinese-tutorial          ———    一个事件方法很全的网站（推荐）

3                                 ———    一个事件方法很全的网站（同上）

4.https://www.cnblogs.com/Bryran/p/3950122.html        —————    jq ui 拖动

二．引用库：

版本：2.13.3

库：https://github.com/jsplumb/jsplumb

链接：https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ 

 

提取码：z2t4

React  vue :    npm   i   jsplumb

注意：低版本需要引用jq 以及jq-ui，此版本不需要

三．在React使用方法：

在我的react项目中，分菜单栏和画布，菜单栏是可拖动子菜单，将菜单拖到画布上，在画布上进行对子菜单项目的操作，大概是这样：

在使用过程中，应为拖动事件，和画图事件都是要先有dom节点,所以，一定要有节点的时候再注册相应的监听事件：

        a.    React项目中要在 componentDidMount() 生命周期后开始操作，因为是单页面应用，要保证当前页面渲染完成后注册jsplumb实例，离开后要销毁实例所以

let idePageJsPlumstance=’’; //初始化 componentDidMount() { idePageJsPlumstance = jsPlumb.getInstance() //关键函数 注册jsplumb实例 idePageJsPlumstance.setContainer ('flow-main')//设置面板 }, //离开 componentWillUnmount() { if (idePageJsPlumstance) { idePageJsPlumstance.clear() //清空 } },