Question

我在我的react componen中直接使用Konva API，它运行完美。

我只有一个大问题。

问题是，当卸载包含ref容器的组件时，react应用程序崩溃，并表示暂存不再具有容器。

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

因此，基本上，据我了解，从react组件内部调用舞台上的destroy不会破坏DOM中的舞台。

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

编辑：添加代码段

package assignment7;

import java.util.ArrayList;
import java.util.List;


class Node {

    public long cid;
    public ArrayList<String> Satellite;
    public Node l;
    public Node r;

    public Node(long cid, ArrayList<String> Sat) {

    this.Satellite = new ArrayList<String>(Sat.subList(0, Math.min(9, Sat.size())));
    this.cid = cid;


    }

}

因此，无论何时卸载此组件，我都会收到错误消息： “未捕获的舞台没有容器。需要一个容器。”

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

Answer 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;
  ...
 }

}

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

1 个答案: