ReactFlow样式优化——多个句柄_reactflow增加handle-优快云博客

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/124705158

本文介绍了如何在React Flow Renderer中实现多个句柄的自定义节点交互，包括显示与隐藏句柄的逻辑、保存布局信息、控制入口节点的出现与消失。作者通过onConnectStart和onConnectEnd方法解决了操作问题，并利用React Hooks和Context传递数据，提升了用户体验。此方法适用于需要更多交互性的流程图应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档或者网上的博客中关于react-flow-renderer的多个句柄都没有对应的具体实例。只能自食其力。

在这里插入图片描述

官网中提到多个句柄需要自定义节点。其中一个Handle为一个句柄。
1.图中的情况就是5个句柄，那么显示与隐藏怎么判断呢？
通过类名，增加一个隐藏的类，设置border和background为transparent。
2.样式写出来了，接下来就是处理保存信息，以便于下次打开布局依旧如此。
句柄的上下左右是通过edges中的sourceHandle和targetHandle，再次打开处理数据时要记得一定要把这两个属性也放进去，不然默认为左侧入口
3.数据也处理完了，接下来就是控制鼠标点击出现入口节点，鼠标弹起控制入口节点消失。那么这里你可能会遇到一个问题，如果给每个节点一个onMouseDown和onMouseUp那么不仅操作范围变小了，而且连线连到一半（图2的情况）松手，入口节点不会消失。这里就使用了文档中的onConnectStart和onConnectEnd方法

<ReactFlow
        elements={elements}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        onConnect={onConnect}
        onLoad={onLoad}
        onDrop={onDrop}
        onConnectStart={onConnectStart}
        onConnectEnd={onConnectEnd}
        onDragOver={onDragOver}
        fitView
      >
        <Controls />
      </ReactFlow>

这里我结合了React的Hook，useContext 传递数据。

总结：这一套的工作流交互相比于只有左右句柄和上下句柄的交互更加人性化，可以尝试。