react-flow edge中间的按钮位置错误

如果您在 `react-flow` 中使用了 `Edge` 组件，并且发现中间的按钮位置不正确，可能是因为您没有正确设置 `sourceHandle` 和 `targetHandle` 属性。 `sourceHandle` 和 `targetHandle` 属性用于指定边缘连接到节点的哪个端口。如果您没有正确设置这些属性，`react-flow` 可能会将按钮放置在错误的位置。 要解决此问题，请按照以下步骤操作： 1. 确保您的节点具有正确的端口：在您的节点组件中，确保每个端口都有一个唯一的 `id` 属性和一个 `position` 属性，以指定其在节点上的位置。 ```jsx import React from 'react'; import { Handle } from 'react-flow-renderer'; const MyNode = ({ data }) => { const { label } = data; return ( ); }; export default MyNode; ``` 2. 设置 `sourceHandle` 和 `targetHandle` 属性：在您的边缘组件中，确保设置 `sourceHandle` 和 `targetHandle` 属性，以指定边缘连接到节点的哪个端口。 ```jsx import React from 'react'; import { Edge } from 'react-flow-renderer'; const MyEdge = ({ id, source, target }) => { return ( ); }; export default MyEdge; ``` 在这个例子中，我们创建了一个名为 `MyNode` 的节点组件，并确