HOCからラップされたコンポーネント関数へのアクセス

Question

onTouchStartによるキータッチイベントを検出するタッチ動作のHOCを想像してください。これで、タッチHOCを使用してラップされたコンポーネントは、独自のハンドラロジックを持ちます。私のHOCコンポーネントは、ラップされたコンポーネントハンドラ関数をどのように呼び出すことができますか？

アイデアを得るために、ここに私が必要なものがあります。調査の結果、refを使用してターゲットコンポーネントを呼び出すthisが見つかりました。私はこれを達成するより良い方法があるのだろうかと思っていました。

TouchBehavior HOC

const TouchBehavior = (WrappedComponent) => 

    class extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       active: false, 
      }; 
      this.handleAction = this.handleAction.bind(this); 
      this.setActiveState = this.setActiveState.bind(this); 
      this.resetActiveState = this.resetActiveState.bind(this); 
     } 

     handleAction(e) { 
      e.preventDefault(); 
      this.setActiveState(); 
      //call wrapped component specific handler logic here 
      _.delay(() => this.resetActiveState() , 150); 
     } 

     setActiveState() { 
      this.setState ({ 
       active: true 
      }); 
     } 

     resetActiveState() { 
      this.setState ({ 
       active: false 
      }); 
     } 

     render() { 
      let touchBehaviorProps = { 
       onTouchStart: this.handleAction 
      }; 
      return <WrappedComponent {...this.props} touchBehaviorProps={touchBehaviorProps} /> 
     } 
    }; 

包まれたコンポーネントは

class Button extends React.Component { 

componentSpecificHandlerLogic(){ 
    //logic goes here 
} 

render() { 
    return <button {..this.props.touchBehaviorProps}></button> 
} 
} 

Answer 1

可能な限り、私は戻って、ツリーアップロジックを引っ張らないようにしてみてくださいではなく、より多くの伝承でしょう。

これを実現する方法はたくさんありますが、このケースでは、ラップされたコンポーネントに提供されている小道具を、提供されたカスタムロジックでハンドラを構成する関数に変更する方法があります。

TouchBehavior HOC

const TouchBehavior = (WrappedComponent) => 

    class extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       active: false, 
      }; 
      this.handleAction = this.handleAction.bind(this); 
      this.setActiveState = this.setActiveState.bind(this); 
      this.resetActiveState = this.resetActiveState.bind(this); 
     } 

     handleAction(e, customHandler) { 
      e.preventDefault(); 
      this.setActiveState(); 
      customHandler(); 
      _.delay(() => this.resetActiveState() , 150); 
     } 

     setActiveState() { 
      this.setState ({ 
       active: true 
      }); 
     } 

     resetActiveState() { 
      this.setState ({ 
       active: false 
      }); 
     } 

     render() { 
      let touchBehaviorProps = (customHandler) => ({ 
       onTouchStart: (e) => this.handleAction(e, customHandler) 
      }); 
      return <WrappedComponent {...this.props} touchBehaviorProps={touchBehaviorProps} /> 
     } 
    }; 

class Button extends React.Component { 

componentSpecificHandlerLogic(){ 
    //logic goes here 
} 

render() { 
    return <button {...this.props.touchBehaviorProps(componentSpecificHandlerLogic)}></button> 
} 
}