Reactjs - 高次コンポーネントのアンマウントが正しく機能しない

Question

ラップされたコンポーネントの外にあるクリックをリッスンするためにHOCを作成しました。

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は」イベントをリッスンし続け、私はエラーメッセージが 得る「不明なエラー：。findDOMNodeをアンマウントコンポーネントで呼び出されました」

何が原因なのでしょうか？

Answer 1

コンストラクタにこれを追加

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

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

Answer 2

removeEventListenerが機能しない理由は、の新しく作成された機能を削除しようとしているためです。 addEventListenerも同様です。これらは2つの完全に異なる機能であり、お互いの参照はまったくありません。

あなたのメソッド_handleClickOutsideをバインドする必要があります。そのため、Reactは正確に1つのバージョンを知っています。あなたはES6の矢印の方法論と

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

または自動それバインドとコンストラクタに

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

それを結合することによって、今、あなたは

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

であなたのイベントリスナーにバインドさメソッドを渡すことを行うと、リスナーを削除します。

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

をしてから、この操作を行います：