在 react-konva 中分配 ref

Question

我们如何将 ref 分配给舞台或图层对象。我正在使用 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>;
};

在 react-konva 中分配 ref

Assigning ref in react-konva

reactjs

react-konva