反应流选择顶部边缘选择底部边缘

如何解决反应流选择顶部边缘选择底部边缘

文档：https://reactflow.dev/docs/api/nodes/

文档中的示例：https://reactflow.dev/examples/custom-node/

重现错误的步骤：

1. 通过拖放移动任何节点
2. 选择您刚刚四处移动的节点的顶部边缘手柄
3. 将边缘拖出，注意如何选择底部边缘而不是顶部边缘

预期行为：在第 3 步中，应拖出顶部边缘而不是底部边缘

代码沙箱：https://codesandbox.io/s/react-flow-forked-xebwl?file=/src/App.tsx

我完全按照文档和示例进行操作，但无论我选择哪条边，我的实现都有一种奇怪的趋势，即拾取底部边。这个问题在 react-flow 的官方 github 问题页面中没有被提出，所以我假设我做错了什么。有人能弄清楚为什么会发生这种行为以及如何解决吗？

解决方法

通过删除 randomID 以保持由于重新渲染而重新生成来找到答案。答案来自 react-flow 创始人 Moritz 本人：

"你需要删除 randomID 部分。这样每次重新渲染时 id 都会改变。你可以给你的节点 id，然后在节点内使用这些 id 作为句柄 id 的前缀：${nodeid}_bottom . 如果所有句柄都是源，则还需要设置 connectionMode="loose" 以将源与源连接。"