Question

我有一个关于将函数作为道具传递的问题。在最后的tic-tac-toe教程（https://facebook.github.io/react/tutorial/tutorial.html）中，Game组件传递onClick处理程序：

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

首先，为什么我们不能这样传递函数：

onClick = { this.handleClick(i) }

而且我明白传递＆＃34;我＆＃34;很重要，但教程中间的内容让我感到困惑：

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

这里我们没有通过＆＃34;我＆＃34;在箭头函数的括号中。我不想写太多，以使问题不那么冗长。我相信有些人已经完成了本教程，并且能够回答我的问题。

更新：Tnx大家的简短和有用的答案。作为后续，在官方文档中，我们被告知绑定一个函数，如果它要用作组件的事件处理程序。为什么这是必要的，为什么它从未用过教程？

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.hadleClick(i)

在这个函数中你可以使用你的参数i，你也可以使用这个引用当前组件的对象。

第二种方式：

this.handleClick.bind(null, i)

在这里你也可以使用你的参数，但你不能使用组件的这个对象，

其中null将是触发事件的DOM。