使用react-flow制作流程图

最新推荐文章于 2025-03-17 15:33:52 发布

星霜Σ(っ °Д °;)っ

最新推荐文章于 2025-03-17 15:33:52 发布

阅读量1.3w

点赞数 5

文章标签： reactjs react

本文链接：https://blog.csdn.net/meteoite/article/details/115758218

版权

React-Flow是一个用于创建基于节点应用程序的库，支持自定义节点和边线类型。它可以用于构建静态图或复杂的编辑器。安装通过npm或yarn，基本使用包括定义elements数组包含节点和边。React-Flow提供了多种属性和方法，如elements、onConnect、nodeTypes等，用于交互和定制。此外，还展示了如何更改节点位置和调用组件方法来操作流程图。

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

1.react-flow

react-flow是一个用于构建基于节点的应用程序的库。这些可以是简单的静态图或复杂的基于节点的编辑器。同时react-flow支持自定义节点类型和边线类型，并且它附带一些组件，可以查看缩略图的Mini Map和悬浮控制器Controls.

2.react-flow安装

npm install react-flow-renderer    # npm
yarn add react-flow-renderer       # Yarn

官方文档地址: https://reactflow.dev/docs/
github地址: https://github.com/wbkd/react-flow

3.react-flow基本使用

 const elements = [
        {
            id: 'node1',
            type: 'input',
            data: { label: ('start') },
            position: { x: 450, y: 50 },
        },
        {
            id:'edge1',
            source:'1',
            target:'2'
        },
        {
            id: 'node2',
            type: 'output',
            data: { label: ('end') },
            position: { x: 450, y: 450 },
        },
    ];
   return (
        <ReactFlow elements={elements} />
   );

在这里插入图片描述
ReactFlow组件中接受数据elements里存储着nodes(节点)和edge(连线)两种数据。
node：

属性	作用
id	唯一标识
type	有input，output，default三种，input只有一个输出，output只有一个输入，default输入输出各有一个
data	显示label中的值，可在label中自定义jsx代码
position	node在图中的x，y位置
targetPosition	有 ‘left’ ，‘right’， ‘top’， 'bottom’用来定义输入口的位置
sourcePosition	同targetPosition，用来定义输出口位置
draggable	控制单个node可否被拖动
connectable	控制单个node可否被连接

edge：

属性	作用
id	唯一标识
source	连接线发出的node的id
target	连接线接受的node的id
sourceHandle	自定义node允许拥有多个输出口，此属性用来确定从哪个输出口发出
targetHandle	同sourceHandle，用来定义哪个口接收
type	连接线类型，有‘default’（bezier），‘straight’，‘step’，‘smoothstep’几种
draggable	控制单个node可否被拖动
connectable	控制单个node可否被连接
animated	控制连接线是否有动画
label	在线上显示的文字

同过在element中设置node和edge数据，可以绘制出完整的流程图

4.react-flow属性与封装的方法

列出几个比较常用的属性

属性	作用
elements	接收的node和edge数据
onConnect	连接节点时触发
onLoad	组件加载时触发，返回组件实例，可通过实例调用方法
onElementsRemove	选中元素后点击Backspace删除元素时触发
nodeTypes	设置所有node的类型
edgeTypes	设置所有连接线的类型
connectionLineType	设置所有连接线类型
connectionMode	有strict（只允许输出口向输入口连线），loose（允许输出向输出，输入向输入连线）两种模式
onlyRenderVisibleElements	只渲染可以被看到元素，默认为true，建议改为false。否则图的元素的位置可能会歪
defaultZoom	默认流程图的放大倍数
minZoom，maxZoom	最小，最大缩放倍数
zoomOnDoubleClick	是否允许双击放大

实例调用的方法

属性	作用
project()	将像素坐标转换为内部 ReactFlow 坐标系
fitView()	调整窗口，尽量使所有元素可见
zoomIn()	放大
zoomOut()	缩小
zoomTo()	缩放到指定倍数
edgeTypes()	设置所有连接线的类型
setTransform()	同时设置缩放倍数与流程图位置
toObject()	返回elements，流程图位置，缩放倍数
onlyRenderVisibleElements	只渲染可以被看到元素，默认为true，建议改为false。否则图的元素的位置可能会歪
defaultZoom	默认流程图的放大倍数
minZoom，maxZoom	最小，最大缩放倍数
zoomOnDoubleClick	是否允许双击放大

组件封装的方法

属性	作用
isEdge()	判断数据是否为连接线
isNode()	判断数据是否为节点
getConnectedEdges()	获取和节点相连的线
removeElements()	移除元素
addEdge()	添加连接线
updateEdge()	更新连接线

tips：如果想要使用代码更改节点的位置，直接更改elements里的positions并不起作用,可以像下面一样通过组件自带的钩子获取到节点后修改。

   const nodes: Node[] = useStoreState((store: ReactFlowState) => store.nodes);
   const node = nodes.find((node) => node.id === 'node2');
   node.__rf.position.y =  150 ;