Callback - Funktion an React - Komponente als prop - less wortreich übergeben?

Question

Ich bin neu in React, also bitte bitte mit mir - ich würde mich freuen, wenn das irgendwo schon beantwortet wäre.

Um meine Füße nass, begann ich eine einfache Button-Komponente Aufbau:

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

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

Diese Schaltfläche Komponente durch eine andere Komponente I App rufen gehört:

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

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

Sehen Sie, wie ich App bestanden " s handleButtonClick() Methode als eine Stütze für die Schaltfläche Komponente. Ich habe diese Idee von der official React tutorial.

Es funktioniert und seit ich das aus einer offiziellen Quelle habe, nehme ich an, das ist eine gute Übung - aber für mich scheint das ein wenig umständlich. Gibt es noch andere Möglichkeiten Callback-Funktionen in React weiterzugeben - vielleicht kürzer oder weniger ausführlich?

Answer 1

React hat Context, um dies zu vereinfachen, obwohl die Autoren explizit Passing Handler als einen überlegenen Ansatz betrachten.