パラメータを持つ関数を引数に渡して反応を返す

Question

私は、親からコンポーネント階層内の子の子まですべての関数を持っています。通常これはあまり問題にはなりませんが、子からパラメータを受け取る必要があります。 現在、このエラーメッセージが表示されています。未知（約束）TypeError：this.props.myFunctionは関数ではありません。ただ、いくつかのそれまでそう

class SomeComponent extends Component{ 

    constructor(props){ 
     super(props); 
     //does whatever stuff   
     this.myFunction = this.myFunction.bind(this); 

    } 

    //(only applicable to raw and normal forms) 
    myFunction(param){ 
     console.log('do something: ', param); 
    } 

    render(){ 
    return (<div><ChildComponent1 myFunction={()=>this.myFunction()}/></div>) 
    } 
} 

class ChildComponent1{ 
     render(){ 
    return (<div><ChildComponent2 myFunction={()=>this.props.myFunction()}/></div>) 
    } 
} 

class ChildComponent2{ 
     render(){ 
    return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>) 
    } 
} 

：ここ

は何をして私のサンプルコードで、私は、ChildComponent2にすべての方法ダウンSomeComponentから小道具としてのMyFunctionを渡していた中で、私はそれをしたいですボタンがクリックされたときに呼び出され、ChildComponent2からパラメータを渡すときに呼び出されます。

ありがとうございます！

Answer 1

あなたがそのエラーになるだろう、なぜ私は表示されませんが、あなたはmyFunction={this.myFunction}とmyFunction={this.props.myFunction}をやるべきこと：ちょうど不要で、転送しません

class SomeComponent extends Component{ 

    constructor(props){ 
     super(props); 
     //does whatever stuff   
     this.myFunction = this.myFunction.bind(this); 

    } 

    //(only applicable to raw and normal forms) 
    myFunction(param){ 
     console.log('do something: ', param); 
    } 

    render(){ 
    return (<div><ChildComponent1 myFunction={this.myFunction}/></div>) 
    } 
} 

class ChildComponent1{ 
     render(){ 
    return (<div><ChildComponent2 myFunction={this.props.myFunction}/></div>) 
    } 
} 

class ChildComponent2{ 
     render(){ 
    return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>) 
    } 
} 

別（矢印）関数内で関数呼び出しをラッピング（中間のすべての矢印関数がパラメータを受け付けないため）