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

如何使用xyflow实现强大的数据验证：节点连接规则与业务逻辑校验完整指南

news 2026/4/17 17:20:18

如何使用xyflow实现强大的数据验证：节点连接规则与业务逻辑校验完整指南

【免费下载链接】xyflowReact Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.项目地址: https://gitcode.com/GitHub_Trending/xy/xyflow

xyflow是一个功能强大的开源库，适用于使用React或Svelte构建基于节点的UI。它提供了开箱即用且无限可定制的数据验证功能，帮助开发者确保节点连接的正确性和业务逻辑的完整性。

什么是xyflow数据验证？

数据验证是节点流程图应用中的关键功能，它确保用户创建的节点连接符合预设的业务规则。xyflow提供了灵活而强大的验证机制，让开发者可以轻松实现各种复杂的连接规则和业务逻辑校验。

核心验证功能：isValidConnection属性

xyflow的核心验证功能通过isValidConnection属性实现。这个属性允许你实现一个适用于所有连接的验证函数，它不仅对用户交互创建的连接有效，还会对以编程方式添加的边进行调用。

React中使用isValidConnection

在React项目中，你可以这样定义验证函数：

const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';

然后将它传递给ReactFlow组件：

<ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} nodeTypes={nodeTypes} isValidConnection={isValidConnection} fitView > <ConnectionStatus /> </ReactFlow>

上面的代码片段来自examples/react/src/examples/Validation/index.tsx文件，它实现了一个简单的验证规则：只允许连接到ID为'B'的节点。

Svelte中使用isValidConnection

在Svelte项目中，使用方式类似：

const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';

然后在SvelteFlow组件中使用：

<SvelteFlow nodes={nodes} edges={edges} on:connect={onConnect} on:nodeschange={onNodesChange} on:edgeschange={onEdgesChange} {nodeTypes} {isValidConnection} fitView > <ConnectionStatus /> </SvelteFlow>

实现自定义验证逻辑

xyflow的验证功能非常灵活，你可以根据业务需求实现各种复杂的验证逻辑。以下是一些常见的验证场景：

1. 基于节点类型的验证

你可以根据源节点和目标节点的类型来限制连接：

const isValidConnection = (connection) => { const sourceNode = nodes.find(node => node.id === connection.source); const targetNode = nodes.find(node => node.id === connection.target); // 只允许从"input"类型节点连接到"process"类型节点 return sourceNode?.type === 'input' && targetNode?.type === 'process'; };

2. 基于节点数据的验证

你还可以基于节点数据中的属性进行验证：

const isValidConnection = (connection) => { const sourceNode = nodes.find(node => node.id === connection.source); const targetNode = nodes.find(node => node.id === connection.target); // 只允许连接具有相同"category"数据属性的节点 return sourceNode?.data.category === targetNode?.data.category; };

3. 基于连接数量的验证

你可以限制节点之间的连接数量：

const isValidConnection = (connection) => { // 计算目标节点已有的入站连接数量 const targetConnections = edges.filter(edge => edge.target === connection.target); // 限制每个节点最多有3个入站连接 return targetConnections.length < 3; };

验证状态反馈

为了提供良好的用户体验，xyflow还支持向用户反馈验证状态。你可以创建一个连接状态组件，显示当前连接是否有效：

// ConnectionStatus.tsx import { useStore } from '@xyflow/react'; const ConnectionStatus = () => { const connectionStatus = useStore(state => state.connectionStatus); if (connectionStatus !== 'invalid') return null; return ( <div className="invalid-connection-message"> ❌ 无效连接！请检查连接规则。 </div> ); }; export default ConnectionStatus;

完整示例：实现节点连接验证

让我们看一个完整的例子，实现一个简单但功能完善的节点连接验证系统：

import { FC, useCallback } from 'react'; import { ReactFlow, addEdge, Handle, Position, Node, NodeTypes, useNodesState, useEdgesState, OnConnect, IsValidConnection, } from '@xyflow/react'; // 初始节点 const initialNodes: Node[] = [ { id: '0', type: 'input', position: { x: 0, y: 150 }, data: { label: '输入节点' } }, { id: '1', type: 'process', position: { x: 250, y: 0 }, data: { label: '处理节点 A' } }, { id: '2', type: 'process', position: { x: 250, y: 150 }, data: { label: '处理节点 B' } }, { id: '3', type: 'output', position: { x: 500, y: 150 }, data: { label: '输出节点' } }, ]; // 自定义验证函数 const isValidConnection: IsValidConnection = (connection) => { const { source, target, sourceHandle, targetHandle } = connection; // 规则1: 输入节点只能连接到处理节点 if (source === '0') { return target === '1' || target === '2'; } // 规则2: 处理节点只能连接到输出节点 if (source === '1' || source === '2') { return target === '3'; } // 规则3: 输出节点不能作为源节点 if (source === '3') { return false; } return true; }; // 自定义节点类型 const InputNode = () => ( <div className="input-node"> <Handle type="source" position={Position.Right} /> <div>输入节点</div> </div> ); const ProcessNode = ({ id, data }) => ( <div className="process-node"> <Handle type="target" position={Position.Left} /> <div>{data.label}</div> <Handle type="source" position={Position.Right} /> </div> ); const OutputNode = () => ( <div className="output-node"> <Handle type="target" position={Position.Left} /> <div>输出节点</div> </div> ); const nodeTypes: NodeTypes = { input: InputNode, process: ProcessNode, output: OutputNode, }; const ValidationExample = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect: OnConnect = useCallback( (params) => setEdges((eds) => addEdge(params, eds)), [setEdges] ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} nodeTypes={nodeTypes} isValidConnection={isValidConnection} fitView > <ConnectionStatus /> </ReactFlow> ); }; export default ValidationExample;