React: Passing Funktionen als Requisiten

Question

Ich habe eine Frage bezüglich der Weitergabe von Funktionen als Requisiten. Im Tic-Tac-Toe-Tutorial (https://facebook.github.io/react/tutorial/tutorial.html) am Ende der Spielkomponente den onClick-Handler als solche geht:

<div className="game-board"> 
    <Board 
    squares = { current.squares } 
    onClick = {(i) => this.handleClick(i) } 
    /> 
</div> 

Erstens, warum kann man die Funktion wie diese Stelle passieren:

onClick = { this.handleClick(i) } 

Und ich verstehe, dass „i“ vorbei ist wichtig, aber etwas in der Mitte des Tutorials verwirrt mich:

return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />; 

wir „i“ Hier nicht passieren in der pare Nthesis der Pfeilfunktion. Ich möchte nicht zu viel schreiben, um die Frage weniger ausführlich zu machen. Ich bin mir sicher, dass einige Leute dieses Tutorial durchgearbeitet haben und eine Antwort auf meine Fragen geben können.

UPDATE: Tnx jeder für die kurze und hilfreiche Antworten. Als Folgemaßnahme wird uns in den offiziellen Dokumenten gesagt, eine Funktion zu binden, wenn sie als Event-Handler für eine Komponente verwendet werden soll. Warum ist das nötig und wieso wurde es nie das Tutorial benutzt?

Answer 1

Dies geht nicht um die Funktion (es ruft die Funktion vor zu onClick Bindung):

onClick = { this.handleClick(i) } 

Alternativ könnten Sie binden:

onClick = { this.handleClick.bind(null, i) } 

Aber der Pfeil Funktion scheint klarer lesen (zumindest IMHO). Für das zweite Problem ist i ein Parameter für handleClick, nicht onClick. onClick hat Parameter (das erste ist das event Objekt), aber in diesem Fall brauchen Sie nichts von den onClick Parametern, so dass sie leer sind.

Answer 2

Als Davin,

sagte

onClick = { this.handleClick(i) } 

Dieser Ausdruck tatsächlich diese Funktion aufruft, nun dann, wie Argumente an die Funktion zu übergeben, sehen es gibt zwei Arten,

(i) => this.hadleClick(i) 

In dieser Funktion können Sie Verwenden Sie Ihr Argument i sowie das Objekt, das sich auf die aktuelle Komponente bezieht.

zweiter Weg:

this.handleClick.bind(null, i) 

Auch hier können Sie Ihr Argument verwenden, aber Sie können dieses Objekt der Komponente nicht verwenden,

wo null DOM sein wird, an dem Ereignis ausgelöst wird.

Answer 3

Was Sie in den onClick-Parameter eingeben, wird während des Renderprozesses ausgeführt, was Sie nicht möchten. Sie möchten einige Aktionen während eines DOM-Ereignisses ausführen.

Deshalb gibt Ihnen das Tutorial die fette Pfeilsyntax: Es bedeutet, dass Sie eine Funktion aufrufen, die eine andere Funktion (in diesem Fall die Methode handleClick) zurückgibt. Wenn das Markup gerendert wird, wird die Funktion innerhalb des Parameters ausgeführt und geben Sie Ihre Funktion zurück, die den eigentlichen Job ausführt, wenn ein Benutzer auf das Element klickt.