React Flow拖拽平移画布时如何设置光标为grabbing样式

问题原因 #

之前手动绑定mousedown/mouseup事件不生效，核心原因是React Flow内部对画布平移的拖拽逻辑做了事件拦截，事件不会正常冒泡到根组件或全局window，且手动绑定全局事件还会出现拖拽节点、连线时误触发光标切换的bug。

方案1：纯CSS实现（最推荐，零额外JS逻辑） #

React Flow 内部已经给画布容器预置了状态类名，不需要自己写事件监听，直接覆写样式即可，稳定性最高：

/* 鼠标悬停在可平移画布上时显示grab光标 */
.react-flow__pane {
  cursor: grab;
}
/* 按住鼠标拖拽平移画布过程中显示grabbing光标 */
.react-flow__pane.dragging {
  cursor: grabbing;
}

如果你的项目使用CSS Module、CSS-in-JS等样式模块化方案，需要给上述选择器添加全局作用域标识，避免样式被隔离无法生效。

这种写法完全对齐组件内部的拖拽状态，不会出现样式和实际操作不同步的问题。

方案2：JS状态控制（适用于需要同步拖拽状态做其他业务逻辑的场景） #

如果需要在JS中拿到画布平移的状态，不要自己绑定原生鼠标事件，直接使用React Flow官方提供的平移生命周期回调即可：

import { useState } from 'react';
import ReactFlow from 'reactflow';

export default function FlowPage() {
  const [isPanning, setIsPanning] = useState(false);

  return (
    <ReactFlow
      // 动态切换光标样式
      style={{ cursor: isPanning ? 'grabbing' : 'grab' }}
      // 画布开始平移拖拽时触发
      onMoveStart={() => setIsPanning(true)}
      // 画布平移结束（松开鼠标）时触发
      onMoveEnd={() => setIsPanning(false)}
      // 其余原有配置项：nodes、edges、fitView等
    />
  );
}

这种写法只会在画布本身被拖拽平移时触发状态更新，不会在拖拽节点、连线等其他操作时误切换光标，逻辑更严谨。

内容的提问来源于stack exchange，提问作者Andrew Hulterstrom