为什么我无法在我的 React 应用程序中访问 Konva Canvas 属性？答案

【问题标题】：Why can't I access Konva Canvas properties in my React app?为什么我无法在我的 React 应用程序中访问 Konva Canvas 属性？
【发布时间】：2020-09-01 11:30:46
【问题描述】：

我正在使用带有 ReactJS 的 FabricJS 库。这里我想创建和使用 Konva.Canvas 构造方法。但是，我在访问 Konva Canvas 属性时遇到了问题。

如果我使用 canvas.add 方法，我会得到错误 canvas.add is not a function

const Konva = window.Konva;
class Canvas extends Component {
    state ={
        canvas: null,
        width: null,
        height: null,
        layer: null,
    }
    componentDidMount() {
        const canvas = new Konva.Canvas({ 
            container: this.c,
            height:this.props.height,
            width:this.props.width
        });
        console.log(canvas);
        const layer = new Konva.Layer();
        this.setState({canvas,layer});
        // canvas.add(layer);
        layer.draw();
    }

【问题讨论】：

是的。如果我使用 canvas.add 方法。它说 canvas.add 不是一个函数。我没有从实例中获取任何属性。我是
请将该信息添加到您的问题中。
你好，我犯了一个愚蠢的错误，使用 Canvas 而不是舞台。已经解决了。谢谢。艾舍伍德
很高兴听到。请提供并接受答案或删除您的问题，以免数百人停下来试图提供帮助。 :)
我已经替换了 const canvas= new Konva.Stage({})

标签： javascript reactjs html5-canvas konvajs

【解决方案1】：

替换

 const canvas = new Konva.Canvas({ 
        container: this.c,
        height:this.props.height,
        width:this.props.width
    });

与

 const canvas = new Konva.Stage({ 
        container: this.c,
        height:this.props.height,
        width:this.props.width
    });

Stage 支持 add 方法。更多信息https://konvajs.org/api/Konva.Stage.html#main

【讨论】：