React：小道具としての機能を渡す

Question

小道具としての機能の渡しに関する質問があります。最後に三目並べのチュートリアル（https://facebook.github.io/react/tutorial/tutorial.html）で ゲームの構成要素のようなのonClickハンドラを渡し：カント私たちは、代わりにこのように関数を渡す理由

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

まず、：

onClick = { this.handleClick(i) } 

そして、私は渡すことを理解し、「i」は重要ですが、チュートリアルの途中で何かが私は混乱：

ここ

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

私たちは、「私」パレに渡しません矢印関数のnthesis。質問をあまり冗長にするのはあまりにも多く書く必要はありません。私はいくつかの人々がこのチュートリアルを完了し、私の質問に答えを与えることができると確信しています。

UPDATE：皆様には、簡単で有益な回答があります。フォローアップとして、公式ドキュメントでは、関数がコンポーネントのイベントハンドラとして使用される場合、関数をバインドするように指示されています。これはなぜ必要なのでしょうか？チュートリアルでそれが一度も使われなかったのはなぜですか？

Answer 1

これは（それが機能onClickに結合する前に、を呼び出す）関数を渡しません：

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

をしかし、矢印機能が明確に思える：また

onClick = { this.handleClick(i) } 

、あなたが結合することができ読む（少なくともIMHO）。

2番目の問題では、は​​のパラメータであり、onClickではありません。 onClickにはパラメータ（最初はeventオブジェクト）がありますが、この場合はonClickパラメータから何も必要ないので空のままです。

Answer 2

デーヴィンは、この式は、実際にすることができます。この機能で

(i) => this.hadleClick(i) 

、通りにある参照、関数に引数を渡す方法を今、その後、その関数を呼び出します

onClick = { this.handleClick(i) } 

、言われたようあなたの引数iを使用するだけでなく、現在のコンポーネントを参照するオブジェクトthisを使用することができます。

第二の方法：

this.handleClick.bind(null, i) 

ここ

また、あなたの引数を使用することはできますが、コンポーネントのこのオブジェクトを使用することはできません、

nullはイベントが発生しているDOMになります。

Answer 3

あなたがしたいことではない、レンダリングプロセス中にonClickパラメータを入れます。 DOMイベント中にいくつかのアクションを実行したい。

このチュートリアルでは太い矢印の構文を示しています。つまり、別の関数（この場合はhandleClickメソッド）を返す関数を呼び出しているため、マークアップがレンダリングされたときにパラメータ内の関数が実行されますユーザーが要素をクリックしたときに実際の作業を行います。