React:将函数作为道具传递

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

我知道传递"我"很重要,但教程中间的某些内容让我很困惑:

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

这里我们不在箭头函数的括号中传递"i".我不想写太多,以使问题不那么冗长.我相信有些人已经完成了本教程,并能够回答我的问题.

更新: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方法），因此，在呈现标记时，它将在参数内执行该函数并返回您的函数，这将在用户单击元素时完成真正的工作。