Konva - Невозможно полностью уничтожить сцену в реакции при размонтировании компонента. - PullRequest
Новая
       36

Konva - Невозможно полностью уничтожить сцену в реакции при размонтировании компонента.

0 голосов
/ 01 ноября 2018

Я использую API Konva непосредственно в моем компоненте реакции, и он отлично работает.

У меня только одна большая проблема.

Проблема в том, что, когда компонент, содержащий контейнер ref, размонтирован, приложение реагирует на сбой, сообщая, что у staging больше нет контейнера.

Я пытался вызвать destroy на сцене, когда компонент размонтируется, он входит в этот метод, но все равно падает.

Итак, насколько я понимаю, призыв уничтожать на сцене из компонента реакции не разрушает сцену из DOM.

Может ли кто-нибудь помочь с этой проблемой?

РЕДАКТИРОВАТЬ: добавление фрагмента кода 

    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>
      )
    }

Поэтому, когда этот компонент отключается, я получаю сообщение об ошибке: «На необученной сцене нет контейнера. Требуется контейнер».

Кроме того, я пытался вызвать на сцене команду destroy, но я все еще получаю ту же ошибку. Кроме того, даже если я создаю и уничтожаю сцену в renderKonva, и, по сути, у меня ничего не будет отображаться, потому что однажды созданная сцена выдает ту же ошибку.

1 Ответ

0 голосов
/ 02 ноября 2018

renderKonva является callbackRef . Из документов:

React вызывает call refback с элементом DOM, когда компонент монтируется, и вызывает его с нулем, когда он монтируется.

Это означает, что при размонтировании 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;
  ...
 }

}

...