临时边

在 React Flow 中，几乎所有内容都围绕节点和边的概念构建。边是节点之间的连接，但如果我们想创建一个只连接到一个节点的边呢？如果没有连接到任何节点的“边”呢？

本示例展示了如何在用户释放连接线而未进行连接时创建“不完整”边。在释放连接线的位置渲染一个幽灵节点，并向流程添加一个临时边。利用可编辑边，用户可以重新拾取边并完成连接，此时幽灵节点将被删除！

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

我们定义了一个 useIncompleteEdge 钩子，它封装了创建和管理“幽灵节点”的逻辑。它返回了一些事件处理程序，旨在传递给 <ReactFlow /> 组件。

• onConnect 在完成连接时调用。

• onConnectEnd 在用户释放连接线时调用。第二个 connectionState 参数可用于确定连接是否成功以及连接的起点（如果连接有效则还包括终点）。此回调函数创建了一个幽灵节点和从 connectionState.fromNode.id 到该幽灵节点的临时边。临时边被标记为 reconnectable，以便用户可以重新拾取边并完成连接。

• onReconnect 在完成重新连接时调用。

• onReconnectEnd 在用户释放重新连接线时调用。此回调函数删除幽灵节点和临时边。在调用 onConnectEnd 时可能会添加回一个新的幽灵节点和临时边。