首页 > 解决方案 > 向 react-konva 容器添加多个层时出现问题

问题描述

由于 Dom 元素,我在使用 react-konva 时遇到了问题。当我尝试添加一个函数来根据 dom 的大小调整 konva 的屏幕大小时。添加图层后出现此错误。

const checkSize = contentRect => {
   const { width, height } = contentRect;
   stage.attrs({
     width,
     height
   });
   stage.batchDraw();
 };

export default class Review extends React.Component {
   constructor(props) {
    super(props);
     this.state = { stage: {} };
  }
  componentDidMount() {
    const { values, colorValue } = this.props;
     imageValue = values;
   colourValue = colorValue;
    this.state.stage = new Konva.Stage({
      container: "container",
      width: 0,
     height: 0
    });
    window.addEventListener("resize", checkSize);
  }

它在那个阶段引发错误

   layer = new Konva.Layer();
   stage.add(layer);

错误消息:TypeError:阶段未定义

标签: javascriptreactjskonvajsreact-konva

解决方案


我想您需要从this.state那里保存该变量:

const checkSize = contentRect => {
   const { width, height } = contentRect;
   this.state.stage.attrs({
     width,
     height
   });
   this.state.stage.batchDraw();
 };

推荐阅读