react-konva中如何给Stage或Layer绑定ref？打印stageEl为undefined怎么办

问题原因 #

你混淆了原生Konva API和react-konva组件的用法：ref是React专属属性，仅在使用react-konva提供的声明式组件<Stage />、<Layer />时可绑定，原生Konva的实例化配置项本身不存在ref参数，所以你在配置中传入ref: stageEl不会生效。

解决方案 #

方案1：保持现有手动实例化Konva对象的写法

直接把生成的实例赋值给ref的current属性即可，无需在实例化配置中传ref：

// 提前声明ref
const stageEl = useRef(null)
const layerEl = useRef(null)

useEffect(() => {
  var stage = new Konva.Stage({
    container: 'stage',
    width: window.innerWidth,
    height: window.innerHeight,
    onMouseDown: (e) => {
      // deselect when clicked on empty area
      const clickedOnEmpty = e.target === e.target.getStage()
      if (clickedOnEmpty) {
        selectShape(null)
      }
    },
  })
  stage.container().style.border = '1px solid grey'
  // 给ref赋值
  stageEl.current = stage

  var layer = new Konva.Layer()
  stage.add(layer)
  // 给ref赋值
  layerEl.current = layer

  // 组件卸载时销毁实例，避免内存泄漏
  return () => {
    stage.destroy()
  }
}, [])

赋值完成后，打印stageEl.current即可获取到Stage实例。

方案2：改用react-konva声明式组件写法（更符合React开发规范）

直接给react-konva提供的组件绑定ref即可获取对应实例：

import { Stage, Layer } from 'react-konva'

const DemoComponent = () => {
  const stageEl = useRef(null)
  const layerEl = useRef(null)

  const handleStageMouseDown = (e) => {
    const clickedOnEmpty = e.target === e.target.getStage()
    if (clickedOnEmpty) {
      selectShape(null)
    }
  }

  return (
    <Stage
      ref={stageEl}
      container="stage"
      width={window.innerWidth}
      height={window.innerHeight}
      onMouseDown={handleStageMouseDown}
      style={{ border: '1px solid grey' }}
    >
      <Layer ref={layerEl}>
        {/* 后续的图形组件写在这里 */}
      </Layer>
    </Stage>
  )
}

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