实际上，我自己使用带有自定义删除按钮的ReactFlow控件解决了这个问题。在<ReactFlow>组件中，我添加了onElementClick prop，它使用React钩子来存储状态中的选定元素。在按钮的onClick prop中，我有另一个钩子，它从状态中获取选定元素，树的所有边，然后调用getConnectedEdges()，它将返回与所选元素相连的所有边。然后将一个包含所选元素和相连边的数组传递给onElementsRemove()。
以下是onElementClick的文档。https://reactflow.dev/docs/api/component-props/

<ReactFlow 
    className={flowStyles}
    elements={elements}
    onElementClick={onClickElement}
>
  <Controls showInteractive={false}>
    <ControlButton onClick={onClickElementDelete}>
      <DeleteIcon />
    </ControlButton>
  </Controls>
</ReactFlow>

const onClickElement = useCallback((event: ReactMouseEvent, element: Node | Edge) => {
  // Set the clicked element in local state
  setState({
    clickedElement: [element]
  })
}, [])

以下是getConnectedEdges的文档。https://reactflow.dev/docs/api/helper-functions/

const onClickElementDelete = useCallback(() => {
    // Get all edges for the flow
    const edges = elements.filter((element: Node | Edge) => isEdge(element))
    // Get edges connected to selected node
    const edgesToRemove = getConnectedEdges(state.clickedElement, edges)

    onElementsRemove([...state.clickedElement, ...edgesToRemove])
    }
  }, [elements, onElementsRemove, state.clickedElement])

您必须在自定义节点的数据属性中添加删除函数，并且在单击自定义节点的删除按钮时，您必须调用该函数
创建自定义节点时=〉

const newNode = {
  id: nodeID,
  type,
  position,
  data: {
      onDelete : yourFunctionToDelete
  }}

删除按钮中的自定义节点代码=〉onClick={props.data.onDelete}

您可以在组件外部使用单独的状态管理库，并直接从节点内部触发操作。
官方文档Using a State Management Library中提到了该技术。
上面写着：
正如您在前面的指南和示例中所看到的，ReactFlow可以很容易地与本地状态一起使用，以处理图的节点和边缘。当您的应用程序不断增长，并且您希望从节点内部更改状态时，事情很容易变得更加复杂。为了避免通过节点数据字段向下传递函数，您可以使用React上下文或添加状态管理库，如本指南中所述。
例如，如果您创建了一个如文档所示的Zustand存储，并从中公开了一个deleteNode操作，那么，您可以使用const deleteNode = useStore((s) => s.deleteNode);从自定义节点访问它。

我可以使用下面的函数实现以下功能。

const deleteNodeById = (id) => {
    flowInstance.setNodes((nds) => nds.filter((node) => node.id !== id))
  }

并将此函数传递给我的删除按钮（在我的情况下是mui删除图标）

<DeleteOutlined
 onClick={() => deleteNodeById(data.id)}
/>