ReactFlow图形锁定咨询：如何实现isLocked=true的只读视图模式？

当然可以，ReactFlow本身就提供了现成的Props来快速实现只读锁定视图，不需要复杂的自定义逻辑。最简实现就是组合几个核心Props，把所有交互能力完全关闭：

• 给<ReactFlow>组件添加isLocked={true}：直接锁定整个画布，节点和边都无法拖拽、移动
• 加上connectable={false}：禁止用户创建新边或修改现有边的连接关系
• 配置deleteKeyCode={null}：禁用通过键盘按键（默认是Delete）删除节点/边的功能
• 可选补充：如果要完全禁止画布缩放，再加上zoomOnScroll={false}、zoomOnDoubleClick={false}

下面是直接可用的代码示例：

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

// 从数据库读取的已完成图形数据
const savedNodes = [...];
const savedEdges = [...];

export default function ReadOnlyFlow() {
  return (
    <ReactFlow
      nodes={savedNodes}
      edges={savedEdges}
      isLocked={true}
      connectable={false}
      deleteKeyCode={null}
      zoomOnScroll={false}
      zoomOnDoubleClick={false}
    />
  );
}

这样配置后，画布就完全进入只读状态：用户无法拖拽节点、修改边、删除元素，也不能缩放画布，完美匹配你展示已完成图形的需求。

内容的提问来源于stack exchange，提问作者Nadyrbek Sultanov