如何在ReactFlow中实现节点层级化连接验证？

核心思路 #

放弃用节点ID绑定层级的方案，改为在节点的自定义数据中存储独立的level属性，这样既能支持同层级多节点，也不用在修改层级时同步修改ID。通过ReactFlow的连接验证机制，对比源节点与目标节点的level值实现规则校验。

步骤1：给节点添加层级属性 #

创建节点时，在data字段中加入level，示例：

const initialNodes = [
  {
    id: 'node-1',
    position: { x: 100, y: 100 },
    data: { label: 'Level 5', level: 5 },
  },
  {
    id: 'node-2',
    position: { x: 300, y: 100 },
    data: { label: 'Level 4', level: 4 },
  },
  // 支持多个同层级节点
  {
    id: 'node-3',
    position: { x: 500, y: 100 },
    data: { label: 'Level 4', level: 4 },
  },
];

步骤2：实现层级可修改的自定义节点 #

在自定义节点组件中添加层级修改控件（如下拉框），更新节点的level属性：

const CustomNode = ({ data, id }) => {
  const { setNodes } = useReactFlow();

  const handleLevelChange = (e) => {
    const newLevel = parseInt(e.target.value);
    setNodes((prevNodes) =>
      prevNodes.map((node) =>
        node.id === id
          ? { ...node, data: { ...node.data, level: newLevel, label: `Level ${newLevel}` } }
          : node
      )
    );
  };

  return (
    <div className="custom-node">
      <div>{data.label}</div>
      <select value={data.level} onChange={handleLevelChange}>
        {[1,2,3,4,5,6].map(lv => (
          <option key={lv} value={lv}>Level {lv}</option>
        ))}
      </select>
    </div>
  );
};

步骤3：实现连接验证逻辑 #

使用ReactFlow的isValidConnection属性，对比源节点和目标节点的level：

const ReactFlowComponent = () => {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState([]);

  const isValidConnection = (connection) => {
    // 获取源节点和目标节点的层级
    const sourceNode = nodes.find(node => node.id === connection.source);
    const targetNode = nodes.find(node => node.id === connection.target);

    if (!sourceNode || !targetNode) return false;
    // 规则：源节点层级 > 目标节点层级
    return sourceNode.data.level > targetNode.data.level;
  };

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={params => setEdges(eds => addEdge(params, eds))}
      isValidConnection={isValidConnection}
      nodeTypes={{ custom: CustomNode }}
    />
  );
};

额外优化：连接时的视觉反馈 #

如果需要在拖拽连接时实时提示是否合法，可以结合useConnectionLine钩子，根据验证结果修改连接线样式：

const { connectionLineStyle } = useConnectionLine({
  style: ({ connection }) => {
    const isValid = isValidConnection(connection);
    return {
      stroke: isValid ? '#55dd99' : '#ff5555',
      strokeWidth: isValid ? 2 : 1.5,
    };
  },
});

// 在ReactFlow组件中传入connectionLineStyle
<ReactFlow
  // ...其他属性
  connectionLineStyle={connectionLineStyle}
/>

这样就解决了你之前遇到的两个问题：

• 修改层级时无需改动节点ID，直接更新data.level即可
• 支持任意数量的同层级节点，每个节点ID唯一，层级独立

内容的提问来源于stack exchange，提问作者William Gibson