Konva - 卸载组件时无法完全破坏反应阶段答案

【问题标题】：Konva - Unable to completely destroy stage in react when unmounting componentKonva - 卸载组件时无法完全破坏反应阶段
【发布时间】：2019-04-05 21:04:05
【问题描述】：

我在我的 react 组件中直接使用 Konva API，它运行良好。

我只有一个大问题。

问题是当包含 ref 容器的组件被卸载时，react 应用程序崩溃，说 staging 没有容器了。

当组件卸载时，我尝试在舞台上调用destroy，它进入该方法但仍然崩溃。

所以基本上，据我了解，从 react 组件中调用舞台上的销毁不会从 DOM 中破坏舞台。

有人可以帮忙解决这个问题吗？

编辑：添加代码 sn-p

    export default class ReactComp extends Component {
     renderKonva(container) {

     var stage = new Konva.Stage({
       container: container,
       width: 500, 
       height: 350
     });
     var layer = new Konva.Layer();
     var rect = new Konva.Rect({
      stroke: '#155DA4',
      strokeWidth: 2,
      fill: '#fff',
      width: 190,
      height: 190,
      shadowColor: 'black',
      shadowBlur: 10,
      shadowOffset: [10, 10],
      shadowOpacity: 0.2,
      cornerRadius: 2,
      opacity: 0.75,
      visible: true
     });
     layer.add(rect);
     stage.add(layer);
    }

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

因此，每当卸载此组件时，我都会收到错误消息： “Uncaught Stage 没有容器。需要一个容器。”

另外，我尝试在舞台上调用destroy，但我仍然得到同样的错误。此外，即使我在 renderKonva 中创建和销毁舞台，本质上我也不会显示任何内容，因为一旦创建舞台，它就会引发相同的错误。

【问题讨论】：

请参阅创建minimal reproducible example，以便我们查看您的问题并重现它。
抱歉，我们需要查看您的代码来帮助您解决问题。
感谢您的回复，我已经添加了一些代码，希望对您有帮助

标签： reactjs dom konvajs konvajs-reactjs react-konva

【解决方案1】：

renderKonva 是 callbackRef。来自文档：

React 会在组件挂载时使用 DOM 元素调用 ref 回调，并在组件卸载时使用 null 调用它。

这意味着，当它卸载时container 是undefined。

所以，

export default class ReactComp extends Component { 
 constructor(props){
  super(props)
  this.stage = null;
 }

 renderKonva(container) {
  if (!container) {
    this.stage.destroy();
    return;
  }

  var stage = new Konva.Stage({
   container: container,
   width: 500,
   height: 350
  });

  this.stage = stage;
  ...
 }

}

【讨论】：