Reactjs - Unmount более высокого порядка не работает правильно

Question

Я создал HOC для прослушивания кликов вне его завернутого компонента, так что завершенный компонент может прослушивать и реагировать по мере необходимости.

Специальный выглядит следующим образом:

const addOutsideClickListener = (WrappedComponent) => { 

    class wrapperComponent extends React.Component { 

     componentDidMount() { 
      console.log('*** component did MOUNT called ***'); 
      document.addEventListener('click', this._handleClickOutside.bind(this), true); 
     } 

     componentWillUnmount() { 
      console.log('*** component will UNMOUNT called ***'); 
      document.removeEventListener('click', this._handleClickOutside.bind(this), true); 
     } 

     _handleClickOutside(e) { 
      const domNode = ReactDOM.findDOMNode(this); 

      if ((!domNode || !domNode.contains(e.target))) { 

       this.wrapped.handleClickOutside(); 
      } 
     } 

     render() { 

      return (
       <WrappedComponent 
        ref={(wrapped) => { this.wrapped = wrapped }} 
        {...this.props} 
       /> 
      ); 
     } 
    } 

    return wrapperComponent; 
} 

Он отлично работает ... большая часть времени.

Когда обернутый компонент демонтирован, метод «componentWillUnmount» вызывается, но «removeEventListener» продолжает прослушивать события, и поэтому я получаю сообщение об ошибке «Uncaught Ошибка: findDOMNode было вызван на отмонтированной компоненте.»

Любые идеи, что может быть причиной этого?

Answer 1

Добавьте к этому конструктору:

this._handleClickOutside = this._handleClickOutside.bind(this) 

, а затем сделать это:

componentDidMount() { 
      document.addEventListener('click', this._handleClickOutside, true); 
     } 

     componentWillUnmount() { 
      document.removeEventListener('click', this._handleClickOutside, true); 
     } 

Answer 2

Причина, по которой ваш removeEventListener не работает, заключается в том, что вы пытаетесь удалить новую функцию. То же самое относится к addEventListener. Это две полностью разностные функции и не имеют никакой ссылки на друг друга.

Вы должны связать свой метод _handleClickOutside, так что React знает там ровно одну его версию. Вы делаете это путем связывания его в конструкторе с

constructor() { 
    super(); 
    this._handleClickOutside.bind(this); 
} 

или авто связать его с методологией стрелки ES6

_handleClickOutside = (e) => { ... } 

Теперь вы передаете переплетены метод своим eventlisteners с

document.addEventListener('click', this._handleClickOutside, true); 

и соответственно, прослушиватель удаления.