react-konva添加图层时报TypeError: stage is undefined，涉及Dom尺寸适配

嘿，我看你这代码里的问题还挺典型的，咱们一步步来捋清楚为啥会报TypeError: stage is undefined，然后给你修正方案：

问题根源分析 #

你的代码里有几个关键问题导致了这个报错：

• 直接修改React State：你在componentDidMount里直接给this.state.stage赋值，React的State是不可直接修改的，这种方式不会触发组件更新，后续你拿这个stage实例的时候可能根本没拿到正确的对象。
• 函数作用域问题：checkSize是独立函数，它无法访问组件内的stage实例，而且你给resize事件绑定这个函数时，也没处理this的指向，导致里面的stage变量完全未定义。
• 初始化时机问题：如果在stage还没正确初始化完成时就尝试添加layer，也会出现找不到stage的情况。

修正后的代码示例 #

export default class Review extends React.Component {
  constructor(props) {
    super(props);
    this.state = { stage: null }; // 初始设为null更合理
    this.checkSize = this.checkSize.bind(this); // 绑定this，确保函数能访问组件实例
    this.containerRef = React.createRef(); // 用ref获取容器DOM，比直接getElementById更可靠
  }

  checkSize() {
    const stage = this.state.stage;
    const container = this.containerRef.current;
    if (!stage || !container) return; // 防止stage或容器未初始化时执行

    const { width, height } = container.getBoundingClientRect();
    stage.attrs({ width, height });
    stage.batchDraw();
  }

  componentDidMount() {
    const { values, colorValue } = this.props;
    // 建议把这些变量存在组件state里，避免用全局变量
    this.setState({ imageValue: values, colourValue: colorValue });
    
    // 正确初始化stage并存入state
    const newStage = new Konva.Stage({ 
      container: this.containerRef.current, 
      width: 0, 
      height: 0 
    });
    this.setState({ stage: newStage });

    // 添加resize监听并初始化执行一次尺寸检查
    window.addEventListener("resize", this.checkSize);
    this.checkSize();

    // 现在添加layer就不会报错了
    const layer = new Konva.Layer();
    newStage.add(layer);
  }

  componentWillUnmount() {
    // 组件卸载时清理监听和Konva资源，防止内存泄漏
    window.removeEventListener("resize", this.checkSize);
    if (this.state.stage) {
      this.state.stage.destroy();
    }
  }

  render() {
    return <div ref={this.containerRef}></div>;
  }
}

额外优化建议 #

• 更推荐使用react-konva提供的<Stage>组件，而不是手动创建Konva.Stage实例，这样更符合React组件化思想，也能更好地利用React的生命周期：

  import { Stage, Layer } from 'react-konva';
  
  // 在render中使用组件化的Stage
  <Stage 
    ref={this.stageRef}
    width={this.state.stageWidth}
    height={this.state.stageHeight}
  >
    <Layer>
      {/* 这里添加你的图形元素 */}
    </Layer>
  </Stage>
  

• 避免使用全局变量存储业务数据，尽量把imageValue、colourValue这类值存在组件的state或props中，保证数据的可追踪性和可控性。

内容的提问来源于stack exchange，提问作者taghrid mahdy