在react-konva中分配ref

Question

我们如何将ref赋给stage或layer对象。我正在使用react-konva。当我执行console.log(stageE1)时，它显示未定义。

  useEffect(() => {
    var stage = new Konva.Stage({
      container: 'stage',
      width: window.innerWidth,
      height: window.innerHeight,
      ref: stageEl, // not working
      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'
    var layer = new Konva.Layer({
      ref: layerEl, // not working
    })
    stage.add(layer)
  }, [])

Answer 1

这不是react-konva使用率。您正在直接使用Konva API。如果你这样做，你可能不需要使用refs。但如果你真的想：

var layer = new Konva.Layer();
// set ref
layerEl.current = layer;

如果你使用react-konva，那么你应该以React的方式定义组件：

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


const App = () => {
  const layerEl = React.useRef();
  return <Stage><Layer ref={layerEl} /></Stage>;
};