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)} />;

這里我們沒有在箭頭函數的括號中傳遞“i”。 我不想寫太多以使問題不那么冗長。 我相信有些人已經完成了本教程，並且能夠回答我的問題。

更新：感謝大家提供簡短而有用的答案。 作為后續，在官方文檔中，如果要將函數用作組件的事件處理程序，我們被告知要綁定一個函數。 為什么這是必要的，為什么它從未在教程中使用過？

Answer 1

這不會傳遞函數（它在綁定到onClick之前調用函數）：

onClick = { this.handleClick(i) }

或者，您可以綁定：

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

但是箭頭函數似乎更清晰易讀（至少恕我直言）。

對於第二個問題， i是handleClick的參數，而不是onClick 。 onClick確實有參數（第一個是event對象），但在這種情況下，您不需要onClick參數中的任何內容，因此它們留空。

Answer 2

你在onClick參數里放的東西會在渲染過程中執行，這不是你想做的。 您想在 DOM 事件期間執行一些操作。

這就是本教程為您提供粗箭頭語法的原因：這意味着您正在調用一個返回另一個函數的函數（在本例中為您的 handleClick 方法），因此在呈現標記時，它將執行參數內的函數並返回您的函數，當用戶點擊元素時，這將完成真正的工作。

Answer 3

正如戴文所說，

onClick = { this.handleClick(i) }

這個表達式實際上調用了那個函數，那么現在如何將參數傳遞給函數，看看有兩種方法：

第一：在這個函數中，你可以使用你的參數i和this對象，它指的是當前組件。

(i) => this.handleClick(i)

第二：在這里，您可以使用您的參數，但不能使用組件的this對象，其中null將是觸發事件的 DOM 元素。

this.handleClick.bind(null, i)