建议先阅读 在 React 项目中引入 GG-Editor 编辑可视化流程，这篇文章写得很好很全面，适合上手。

下面是我在项目中遇到的需求和对应的解决办法。

官方文档

先上地址：官方文档

找官方文档太难了。
官网上没有，github上的文档只有安装说明，并没有API之类的东西。
直接搜找到了很多相关文章，但是发现很多里面的东西都不生效，比如参考文档中很多事件不生效。
在不知所措的怀疑蚂蚁金服和自己的时候，找到了官方文档。其实是某个版本的gg-editor的说明文档。但是亲测里面的东西都是有效的。
[不理解为什么最新版本的gg-editor里面没有详细的说明文档了]

需求：拖拽结点进页面时做操作

问题1： 第一次拖拽到画布上时，网关类型弹出不同弹窗

本来想用onDrop，但是不行——初次拖到画布上时，onDrop的监听函数的参数e里没有任何信息。

解决：用onAfterChange

问题2：拖动节点到画布上，节点会自动消失

背景：拖动节点到画布上，会出现弹窗。填写节点的相关信息之后，点击“确定”关闭弹窗。发现此时该节点也会消失。
分析：这是因为Flow组件的data参数改变了。

<Flow data={{...datas}} />

参数data只是指定的初始数据，而且每次添加删除节点都不需要手动修改data。gg-editor内部会处理。按道理来讲不会出现这种问题。
可是假如是这么写的代码，那么每次重新render时，传给Flow组件的都是一个新的对象。Flow会在点击“确定”之后再重现渲染一次

问题3：如果Flow有初始化data，拖节点进画布，关掉弹窗后，新拖进来的结点会消失

分析：
在没有弹窗的时候拖节点是没问题的，可是点击确定关闭弹窗的时候原来的结点却消失了。这是因为此时改变了data这个对象，所以gg-editor认为需要重新渲染了。可是这个时候，并没有把新加的节点的信息放在data里面。

问题4：can’t read read of undefined

本来是在Toolbar的didMount中调用的。结果报错can’t read read of undefined。这是因为当时画布还没画好。所以单独封装了Flow组件，在Flow组件的didMount中调用。

调研的时候，所有功能都要走一遍。不要想当然，也不要偷懒。像这次，包括初始数据的加载，还有刚拖到页面的时候怎么区分是哪个节点，这两个问题没有提前弄清楚。还好不麻烦。
调研是自己要做的，所以一定要认真负责。

Tips：

propsAPI是可以导出的
本来是只能是Flow的子组件结合使用，可是这样的限制太大了。而且调其中的方法的时候有时候编辑器还没加载好，所以会报错。
然后利用子组件先didMount然后是父组件，这个特性。在didMount的时候把这个导出，就可以在父组件的didMount中使用了。

propsAPI
应该是封装了具体的图的一些信息。所以，每次应该重新设置一下值。不能使用同一个。
我还以为只是一个方法的接口。
withPropsAPI包裹的组件必须是GGEditor的子组件。

graph内部是按照item.id执行逻辑的。比如连线时默认给edge的source和target。
item.id是gg-editor自动生成的。看api可知用户只能修改model，并不能修改item.id。