子へのメソッドの受け渡し

Question

My Reactアプリには、さまざまなタスクを実行するいくつかの同様のカスタムボタンがあります。 UIはすべてのボタンで似ていますが、それぞれのトリガーが必要とするアクションとタイトルが変更されています。

ボタンを含む親コンポーネントのための作業コードは、次の（類似）である：

class Page extends Component { 
    constructor(props) { 
     super(props); 
    } 

    action1(){ 
     //... do stuff... 
    } 

    action2(){ 
     //... do stuff... 
    } 

    render(){ 

     return(
      <div className="table-row"> 

       <div className="table-cell"> 
        <div className="button" 
         onClick={this.action1.bind(this)}>{"button1"} 
        </div> 
       </div> 

       <div className="table-cell"> 
        <div className="button" 
          onClick={this.action2.bind(this)}>{"button2"} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

子コンポーネントには、変数値に対して行われるのと同じ方法を方法を渡すことは可能です？私はこれを次のように変えたい：

class Page extends Component { 
    constructor(props) { 
     super(props); 
    } 

    action1(){ 
     //... do stuff... 
    } 

    action2(){ 
     //... do stuff... 
    } 

    render(){ 

     return(
      <div className="table-row"> 

       <div className="table-cell"> 
        <CustomButton action={this.action1.bind(this)} title={"button1"}/> 
       </div> 

       <div className="table-cell"> 
        <CustomButton action={this.action2.bind(this)} title={"button2"}/> 
       </div> 
      </div> 
     ); 
    } 
} 

class CustomButton extends Component{ 
    constructor(props){ 
     super(props); 
    } 

    render() { 
     return (
      <div className="table-cell"><div className="button" 
       onClick= {this.props.action}>{this.props.title} 
      </div> 
     ); 
    } 
} 

この状況とその背後にある理論を正しく扱うにはどうすればよいでしょうか？

違いがある場合は、React with Meteorを使用しています。

Answer 1

コンポーネントに小道具を渡すことができます。渡された小道具は、任意のデータ型のjavascriptを持つことができます。

あなたの場合、値として機能を持つアクション小道具を渡す必要があります。次に、コンポーネントのアクション・プロップにアクセスして使用します。

要するに、その背後には理論はありません。あなたがしていることは正しいです。これは、反応がデータを他のコンポーネントに渡す処理方法です。子コンポーネントにデータを渡す唯一の方法ではないことに注意してください。