如何在react-konva事件处理函数中访问stage或layer对象？

在react-konva开发中，从事件处理函数获取stage、layer实例有两种最常用的可靠方案，拿到实例后可以直接调用find()等Konva原生API操作节点：

方案1：直接从事件对象获取（最简便，无需额外绑定） #

所有react-konva节点触发的事件，回调参数自带Konva事件对象，直接通过触发事件的节点向上溯源即可拿到对应layer、stage实例，不需要额外定义ref：

const handleShapeClick = (e) => {
  // e.target是当前触发事件的Konva节点实例
  const currentNode = e.target;
  // 获取节点所在的Layer实例
  const layer = currentNode.getLayer();
  // 获取整个画布的Stage实例，任意Konva节点调用getStage()都能拿到根stage
  const stage = currentNode.getStage();

  // 直接调用find方法搜索节点，和原生Konva用法完全一致
  // 比如在stage全局查找className为'mark'的节点
  const markedNodes = stage.find('.mark');
  // 或者在当前layer范围内查找所有矩形
  const allRects = layer.find('Rect');
}

这个方案适合所有Konva节点内部绑定的事件（比如onClick、onMouseMove、onDragEnd等），不需要额外维护引用，写起来最简洁。

方案2：通过React Ref绑定实例（适配全场景） #

如果你需要在外部DOM事件、异步逻辑里访问stage/layer，或者不想从事件对象逐层找，可以直接给Stage、Layer组件绑定ref，直接通过ref读取实例：

import { useRef } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

function CanvasApp() {
  // 定义ref存实例
  const stageRef = useRef(null);
  const mainLayerRef = useRef(null);

  // 外部DOM按钮的点击事件，也能拿到canvas实例
  const handleExternalOperate = () => {
    const stage = stageRef.current;
    const mainLayer = mainLayerRef.current;
    // 调用find搜索节点
    const target = stage.findOne('#special-shape');
  };

  return (
    <div>
      <button onClick={handleExternalOperate}>操作画布</button>
      {/* 给组件绑定ref，组件挂载后ref.current就是对应的Konva实例 */}
      <Stage ref={stageRef} width={800} height={600}>
        <Layer ref={mainLayerRef}>
          <Rect 
            x={20} y={20} width={100} height={100} fill="#1677ff"
            onClick={(e) => {
              // 内部事件同样可以直接读ref拿实例
              const stage = stageRef.current;
            }}
          />
        </Layer>
      </Stage>
    </div>
  );
}

注意：不要尝试通过原生DOM选择器（比如document.querySelector）拿canvas标签再找Konva实例，Konva的节点体系独立维护在内存中，DOM上没有挂载对应的实例属性，上述两种方式是官方推荐的标准访问路径。
拿到的stage、layer实例和原生Konva库生成的实例完全一致，所有Konva原生API都可以直接调用，没有适配层差异。

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