在React中访问有条件呈现的画布元素以进行绘图

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

class DrawingCanvas extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showCanvas: false, // 根据条件确定是否显示画布
    };
  }

  render() {
    const { showCanvas } = this.state;

    return (
      <div>
        {showCanvas && (
          <Stage width={window.innerWidth} height={window.innerHeight}>
            <Layer>
              <Rect
                x={20}
                y={20}
                width={100}
                height={100}
                fill="red"
                draggable
              />
              <Text text="Hello React!" fontSize={30} />
            </Layer>
          </Stage>
        )}
      </div>
    );
  }
}

export default DrawingCanvas;