如何在React Flow中阻止特定类型节点被删除？

当然可行，你需要替换内置的自动删除逻辑，改成自定义按键监听来实现过滤：

实现步骤： #

1. 先移除ReactFlow组件上的deleteKeyCode={'Delete'}配置，避免内置删除逻辑和自定义逻辑冲突。
2. 监听全局键盘事件，捕获Delete按键操作，在回调里处理节点过滤和删除：
   • 获取当前选中的节点集合
   • 过滤掉你想要保护的节点类型（比如示例中的'protected-node'，替换成你的目标类型）
   • 调用React Flow实例的deleteNodes方法，传入过滤后的节点ID列表

修改后的代码示例： #

import { useEffect, useCallback, useState } from 'react';
import ReactFlow from 'reactflow';

const YourFlowComponent = () => {
  const [reactFlowInstance, setReactFlowInstance] = useState(null);
  // 保留你原有的状态和回调函数：nodes、edges、handleOnNodesChange等

  // 自定义删除逻辑
  const handleDeleteKey = useCallback((e) => {
    if (e.key === 'Delete' && reactFlowInstance) {
      const { selectedNodes } = reactFlowInstance;
      // 过滤掉禁止删除的节点类型，替换成你实际要排除的类型
      const deletableNodeIds = selectedNodes
        .filter(node => node.type !== 'protected-node')
        .map(node => node.id);
      
      if (deletableNodeIds.length > 0) {
        reactFlowInstance.deleteNodes(deletableNodeIds);
      }
    }
  }, [reactFlowInstance]);

  // 绑定/解绑键盘事件监听
  useEffect(() => {
    window.addEventListener('keydown', handleDeleteKey);
    return () => window.removeEventListener('keydown', handleDeleteKey);
  }, [handleDeleteKey]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onConnect={handleOnConnect}
      onDragOver={handleOnDragOver}
      onDrop={handleOnDrop}
      connectionLineComponent={ConnectionLine}
      onNodesChange={handleOnNodesChange}
      onConnectStart={() => dispatch(setIsConnecting(true))}
      onConnectStop={() => dispatch(setIsConnecting(false))}
      onEdgesChange={handleOnEdgesChange}
      onInit={setReactFlowInstance}
      // 移除内置删除键配置
      defaultZoom={1}
      nodeTypes={customNodeTypes}
      edgeTypes={customEdgeTypes}>
      <Background className={classes.flowBackground} />
      <Controls />
    </ReactFlow>
  );
};

补充说明： #

• 把node.type !== 'protected-node'中的'protected-node'替换成你实际想要排除的节点类型名称
• 如果需要排除多种类型，可以用!['type1', 'type2'].includes(node.type)来过滤
• 这种方式能完全掌控哪些节点可以被删除，比内置逻辑更灵活

内容的提问来源于stack exchange，提问作者Eric Noguchi