コールバック関数をReactコンポーネントに継承しないで冗長な方法で渡しますか？

Question

私はReactを初めて使っていますので、私と一緒にご負担ください。すでにこれがどこかで答えられていれば嬉しく思います。

私の足が濡れるために、私はシンプルなボタンコンポーネントを構築開始しました：

const Button = React.createClass({ 
    render() { 
     return(
      <button type="button" onClick={this.onClick}>Hallo Button</button> 
     ) 
    }, 

    onClick() { 
     this.props.onButtonClick() 
    }, 
}) 

このボタンコンポーネントが、私はApp呼び出す別のコンポーネントによって所有されています

const App = React.createClass({ 
    render() { 
     return (
      <div> 
       <h1>Hallo Welt</h1> 
       <Button onButtonClick={this.handleButtonClick}/> 
      </div> 
     ) 
    }, 

    handleButtonClick() { 
     console.log('Button clicked') 
    }, 
}) 

は、「私はAppに合格する方法を参照してください。ボタンコンポーネントの小道具としてのhandleButtonClick()メソッド。私はofficial React tutorialからこのアイデアを得ました。

それは作品と私は公式のソースからこれを得たので、私はこれは良い習慣であると仮定 - しかし、私には、これは少し面倒なようです。 Reactでコールバック関数を渡す方法は他にもありますか？おそらく短くても少なくてもかまいません。

Answer 1

は作者が明示的に優れたアプローチであることをハンドラに渡して検討したが、これを簡素化するためにContextを持って反応します。