# 反应流程 React Flow (@xyflow/react) 是一个用于构建基于节点的图形、工作流编辑器和交互式图表的库。它提供了一个高度可定制的框架，用于创建可视化编程接口、流程和网络可视化。 ## 快速入门 ### 安装 pnpm 添加@xyflow/react ### 基本设置从 '@xyflow/react' 导入 { ReactFlow, Node, Edge, Background, Controls, MiniMap }; 导入'@xyflow/react/dist/style.css'; const 初始节点：节点[] = [ { id: '1', 类型：'输入'， data: { label: '输入节点' }, 位置：{x：250，y：5}， }, { id: '2', data: { label: '默认节点' }, 位置：{x：100，y：100}， }, { id: '3', 类型：'输出'， data: { label: '输出节点' }, 位置：{x：400，y：100}， }, ]; const initialEdges: Edge[] = [ { id: 'e1-2', 源: '1', 目标: '2', 动画: true }, { id: 'e2-3', 源: '2', 目标: '3' }, ]; 函数流（）{ 返回（

<背景/> <控制/> <小地图/>

）； } 导出默认流量； ## 核心概念 ### 节点节点是图的构建块。每个节点有： * `id`: 唯一标识符 * `type`：节点类型（内置或自定义） * `位置`: { x, y } 坐标 * `data`: 自定义数据对象从 '@xyflow/react' 导入 { Node } ；常量节点：节点= { id: '节点-1', 类型：'默认'，位置：{x：100，y：100}， data: { label: '节点标签' }, 样式：{背景：'#D6D5E6'}，类名：'自定义节点'， }; 内置节点类型： * `default`: 标准节点 * `input`: 没有目标句柄 * `output`: 无源句柄 * `group`: 其他节点的容器 ### 边缘边连接节点。每条边都需要： * `id`: 唯一标识符 * `source`: 源节点ID * `target`: 目标节点ID 从'@xyflow/react'导入{Edge}；常量边缘：边缘= { id: 'e1-2', 来源：'1'，目标：'2'，类型：'平滑步'，动画：真实， label: '边缘标签', 样式：{ 笔画：'#fff'，笔画宽度：2 }， }; 内置边缘类型： * `默认`: 贝塞尔曲线 * `straight`: 直线 * `step`: 正交，有尖角 * `smoothstep`：带圆角的正交 ### 手柄句柄是节点上的连接点。使用“Position”枚举进行放置：从'@xyflow/react'导入{句柄，位置}； <句柄类型=“目标”位置= {Position.Top} /> <句柄类型=“源”位置= {Position.Bottom} /> 可用位置：`Position.Top`、`Position.Right`、`Position.Bottom`、`Position.Left` ## 状态管理 ### 控制流使用状态钩子进行完全控制：从 '@xyflow/react' 导入 { useNodesState, useEdgesState, addEdge, OnConnect }; 从'react'导入{useCallback}；函数受控流（）{ const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect: OnConnect = useCallback( (连接) => setEdges((eds) => addEdge(连接, eds)), [设置边缘] ）；返回（ <反应流节点={节点} 边缘={边缘} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} /> ）； } ### 使用ReactFlow Hook 访问 React Flow 实例以进行编程控制：从'@xyflow/react'导入{useReactFlow}；函数流控制（）{ 常量{ 获取节点，获取边，设置节点，设置边线，添加节点，添加边，删除元素，适合视图，放大，缩小，获取节点，获取边缘，更新节点，更新边缘， } = useReactFlow(); 返回（）； } ## 自定义节点使用带有类型化数据的 NodeProps 定义自定义节点：从 '@xyflow/react' 导入 { NodeProps, Node, Handle, Position }; 导出类型 CustomNode = Node<{ 标签：字符串；状态：'活动'| '非活动' }, '自定义'>; function CustomNodeComponent({ data, selected }: NodeProps) { 返回（

<句柄类型=“目标”位置= {Position.Top} />

{data.label}

<句柄类型=“源”位置= {Position.Bottom} />

）； } 向 `nodeTypes` 注册： const nodeTypes: NodeTypes = { 自定义: CustomNodeComponent }; ### 关键模式 * **多个手柄** ：使用 `id` 属性和 `style` 进行定位 * **动态句柄** ：添加/删除句柄后调用 `useUpdateNodeInternals([nodeId])` * **交互式元素** ：添加 `className="nodrag"` 以防止在输入/按钮上拖动有关样式、航空地图图钉和动态手柄等详细模式，请参阅[自定义节点参考]()。 ## 自定义边缘使用 EdgeProps 和路径实用程序定义自定义边：从 '@xyflow/react' 导入 { BaseEdge, EdgeProps, getBezierPath }; 导出类型 CustomEdge = Edge<{ 状态： '正常' | '错误' }, '自定义'>; 函数 CustomEdgeComponent(props: EdgeProps) { const [edgePath] = getBezierPath(props); 返回（ <基础边缘 id={props.id} 路径={边缘路径} style={{ 笔画: props.data?.status === '错误' ? '#ef4444' : '#64748b' }} /> ）； } ### 路径实用程序 * `getBezierPath()` \- 平滑曲线 * `getStraightPath()` \- 直线 * `getSmoothStepPath()` \- 带圆角的正交 * `getSmoothStepPath({ borderRadius: 0 })` \- 与尖角正交（阶梯边缘）全部返回“[path, labelX, labelY, offsetX, offsetY]”。 ### 互动标签将“EdgeLabelRenderer”用于带有指针事件的基于 HTML 的标签：从 '@xyflow/react' 导入 { EdgeLabelRenderer, BaseEdge, getBezierPath }; 函数 ButtonEdge(props: EdgeProps) { const [edgePath, labelX, labelY] = getBezierPath(props); 返回（ <> <边缘标签渲染器>

）； } 有关动画边缘、时间标签和 SVG 文本模式，请参阅[自定义边缘参考]()。 ## 视口控制使用`useReactFlow()`钩子进行编程视口控制：从'@xyflow/react'导入{useReactFlow}；函数 ViewportControls() { const { fitView、zoomIn、zoomOut、setCenter、screenToFlowPosition } = useReactFlow(); // 适合视图中的所有节点 const handleFitView = () => fitView({ 填充: 0.2, 持续时间: 400 }); // 缩放控制 const handleZoomIn = () => ZoomIn({ 持续时间: 300 }); const handleZoomOut = () => ZoomOut({ 持续时间: 300 }); // 以特定坐标为中心 const handleCenter = () => setCenter(250, 250, { 缩放: 1.5, 持续时间: 500 }); // 将屏幕坐标转换为流坐标 const addNodeAtClick = (事件: React.MouseEvent) => { const 位置 = screenToFlowPosition({ x: event.clientX, y: event.clientY }); // 使用位置添加节点 }; 返回空值； } 请参阅 [视口参考]() 了解保存/恢复状态、受控视口和坐标转换。 ## 活动 React Flow 提供全面的事件处理： ### 节点事件从 '@xyflow/react' 导入 { NodeMouseHandler, OnNodeDrag }; const onNodeClick: NodeMouseHandler = (事件, 节点) => { console.log('节点被点击：', node.id); }; const onNodeDrag: OnNodeDrag = (事件, 节点, 节点) => { console.log('拖动：', node.id); }; <反应流 onNodeClick={onNodeClick} onNodeDrag={onNodeDrag} onNodeDragStop={onNodeClick} /> ### 边缘和连接事件从'@xyflow/react'导入{EdgeMouseHandler，OnConnect}； const onEdgeClick: EdgeMouseHandler = (event, edge) => console.log('Edge:', edge.id); const onConnect: OnConnect = (连接) => console.log('已连接：', 连接); ### 选择和视口事件从 '@xyflow/react' 导入 { useOnSelectionChange, useOnViewportChange }; useOnSelectionChange({ onChange: ({ 节点, 边缘 }) => console.log('选定:', 节点.长度, 边缘.长度), }); useOnViewportChange({ onChange: (viewport) => console.log('Viewport:', viewport.zoom), }); 有关完整的事件目录（包括验证、删除和错误处理），请参阅[事件参考]()。 ## 常见模式 ### 防止拖动/平移 ### 连接验证 const isValidConnection = (连接: 连接) => { return 连接.源 !== 连接.目标; // 防止自连接 }; ### 单击时添加节点 const { screenToFlowPosition, setNodes } = useReactFlow(); const onPaneClick = (事件: React.MouseEvent) => { const 位置 = screenToFlowPosition({ x: event.clientX, y: event.clientY }); setNodes(nodes => [...nodes, { id: `node-${Date.now()}`, 位置, data: { label: '新' } }]); }; ### 更新节点数据 const { updateNodeData } = useReactFlow(); updateNodeData('node-1', { label: '更新' }); updateNodeData('node-1', (node) => ({ ...node.data, count: node.data.count + 1 })); ## 提供者模式在流程外使用 useReactFlow() 时，使用 ReactFlowProvider 包装应用程序：从 '@xyflow/react' 导入 { ReactFlow, ReactFlowProvider, useReactFlow }; 函数控制() { const { fitView } = useReactFlow(); // 必须在提供者内部 return ; } 函数应用程序（）{ 返回（ <控制/> ）； } ## 参考文件详细的实现模式请参见： * [自定义节点]() \- NodeProps 类型、Handle 组件、动态句柄、样式模式 * [自定义边缘]() \- EdgeProps 键入、路径实用程序、EdgeLabelRenderer、动画边缘 * [Viewport]() \- useReactFlow 方法、fitView 选项、坐标转换 * [事件]() \- 节点/边缘/连接事件、选择处理、视口更改

反应流程

包含技能