当前位置：首页 > news >正文

React Flow 边的基础知识与示例：从基本属性到代码实例详解

news 来源：原创 2025/5/19 8:37:01

本文为《React Agent：从零开始构建 AI 智能体》专栏系列文章。专栏地址：https://blog.csdn.net/suiyingy/category_12933485.html。项目地址：https://gitee.com/fgai/react-agent（含完整代码示例与实战源）。完整介绍：https://blog.csdn.net/suiyingy/article/details/146983582。

节点和边是相互依存的关系。边的存在依赖于节点，因为边的起点（source）和终点（target）都是节点的 id。边用于定义节点之间的连接关系，这种关系可以表示流程流向、数据传递方向、依赖关系等。节点通过边与其他节点进行交互，形成一个有机的图表结构。例如，在一个流程图中，节点可能代表不同的任务步骤，边则表示任务之间的执行顺序。

边与节点共同构成 React Flow 图表的核心内容，由 React Flow 容器统一管理。容器负责处理边的布局计算、渲染以及交互响应，确保边能够准确地连接节点，并在节点位置变动、图表缩放等操作下，依然保持正确的连接关系和视觉效果。边的存在使得原本独立的节点形成一个有机整体，赋予图表实际的业务意义和交互价值。

1 基本示例程序

下面是边的基本示例程序。

import React, { useCallback } from 'react';
import {ReactFlow,useNodesState,useEdgesState,addEdge,
} from 'reactflow';import 'reactflow/dist/style.css';const initialNodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'default'}
];export default function App() {const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)),[setEdges],);return (<div style={{ height: '500px' }}><ReactFlownodes={nodes}edges={edges}onNodesChange={onNodesChange}onEdgesChange={onEdgesChange}onConnect={onConnect}fitView/></div>);
}

运行程序后结果如下图所示。

图1 直线边

2 基本属性

2.1 id

id：边的唯一标识符，用于在 React Flow 中识别和管理边。在复杂图表中，通过 id 可以方便地获取、更新或删除特定边。

const edgeWithId = {id: 'unique-edge-id-1',source: 'node-a',target: 'node-b',type:'default'
};

2.2 source 和 target

source 和 target：分别指定边的起点和终点节点的 id，是边存在的基础，决定边连接的节点对象。source 是提供输入的节点，target 则是接收输出的节点。

const specificConnectionEdge = {id: 'edge-2',source: 'node-3',target: 'node-4',type: 'straight'
};

2.3 sourceHandle 和targetHandle

sourceHandle 和targetHandle：分别指定边的起点和终点节点的连接端点 id。sourceHandle 是提供输入的端点，targetHandle 则是接收输出的端点。

import React, { useCallback } from 'react';
import {ReactFlow,useNodesState,useEdgesState,addEdge,Handle,
} from 'reactflow';
import 'reactflow/dist/style.css';const CustomNode = ({ data }) => {return (<div style={{padding: 20,border: '1px solid #ddd',borderRadius: 5,background: '#fff',}}><div>{data.label}</div>{/* 左侧两个输入句柄 */}<Handletype="target"position="left"id="input-1"style={{ top: '30%' }}/><Handletype="target"position="left"id="input-2"style={{ top: '70%' }}/>{/* 右侧两个输出句柄 */}<Handletype="source"position="right"id="output-1"style={{ top: '30%' }}/><Handletype="source"position="right"id="output-2"style={{ top: '70%' }}/></div>);
};const initialNodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' },type: 'custom',},{ id: '2', position: { x: 200, y: 100 }, data: { label: '2' },type: 'custom',},
];const initialEdges = [{ id: 'e1-2a', source: '1', sourceHandle: 'output-1',target: '2', targetHandle: 'input-2',},{ id: 'e1-2b', source: '1', sourceHandle: 'output-2',target: '2', targetHandle: 'input-1',}
];const nodeTypes = {custom: CustomNode,
};export default function App() {const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);const onConnect = useCallback((params) => setEdges((eds) => addEdge({...params,type: 'default',}, eds)),[setEdges]);return (<div style={{ height: '500px' }}><ReactFlownodes={nodes}edges={edges}onNodesChange={onNodesChange}onEdgesChange={onEdgesChange}onConnect={onConnect}nodeTypes={nodeTypes}fitView/></div>);
}

运行程序后结果如下图所示。

图2 指定连接点

2.4 type

type：指定边的类型，既可以是内置类型，也可以是自定义类型，影响边的渲染方式和默认行为。边的类型丰富多样，默认包含 default、straight、step、smoothstep 等，每一种类型都赋予边独特的形状与视觉呈现，满足不同场景的设计需求。default 类型的边通常会根据节点的相对位置，以自然流畅的曲线形态连接节点，这种曲线过渡柔和，能够在复杂的节点布局中营造出一种和谐、美观的视觉效果，让整个流程图看起来更具艺术感；straight 类型如其名，边呈现为笔直的线条，简洁明了地连接两个节点，这种形状在追求简洁、直观表达连接关系的场景下极为适用，能够快速引导用户理解节点之间的直接关联；step 类型的边则是通过直角转折的方式连接节点，它会以阶梯状的折线形态出现，适合用于表示具有明确步骤、层级关系的连接，为流程图增添清晰的逻辑层次感；smoothstep 类型的边在 step 类型的基础上进行了优化，它同样有转折，但转折处采用了平滑的曲线过渡，在保留逻辑分层感的同时避免了过于生硬的直角，使边的形态更加优雅流畅，在复杂且注重美观与逻辑兼具的流程图中发挥重要作用。

const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'smoothstep'}
];

运行程序后结果如下图所示。

图3 smoothstep 类型

2.5 style

style：用于设置边的内联样式，包括线条颜色、宽度、线型（实线、虚线等）、箭头样式等。例如，将边设置为红色虚线：

const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'smoothstep',style: {stroke:'red',strokeWidth: 3,strokeDasharray: '5, 5',}}
]

运行程序后结果如下图所示。

图4 边样式

2.6 animated

animated：设置为true时，边可以启用动画效果，如淡入淡出、路径变化动画等，增强图表的动态展示效果。

const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'smoothstep',animated: true,style: {stroke:'red',strokeWidth: 3,strokeDasharray: '5, 5',}}
];

2.7 selectable

selectable：控制边是否可以被用户选中。选中边后，可以对其进行编辑、删除等操作，或展示相关信息。

const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'smoothstep',animated: true,selectable: true,style: {stroke:'red',strokeWidth: 3,strokeDasharray: '5, 5',}}
];

2.8 事件属性

onClick、onMouseEnter等事件属性：与节点类似，边也可以绑定各种事件处理函数，响应用户操作。例如，当用户点击边时，显示边的详细信息：

const initialEdges = [{ id: 'e1-2', source: '1', target: '2',type: 'smoothstep',animated: true,selectable: true,style: {stroke:'red',strokeWidth: 3,strokeDasharray: '5, 5',},onClick: () => {alert('You clicked the edge!');}}
];