React教程函数提升传递疑问：Game层handleClick为何带参数(i)

这个问题核心在于组件间参数传递链条的变化，我来一步步拆解清楚：

先回忆函数提升前的逻辑 #

在handleClick还属于Board组件时，Board渲染每个Square时，是直接在自身的renderSquare方法里生成回调：

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

这里的i是Board循环渲染Square时的索引，Board本身就知道每个Square对应的位置，所以回调函数直接调用this.handleClick(i)即可——因为i已经在Board的作用域里了，不需要额外接收参数。

函数提升到Game后的变化 #

当我们把handleClick移到顶层的Game组件后，Game并不知道具体哪个Square被点击了，这个关键信息需要由Board传递上来。这时候：

1. Game需要给Board传递一个能接收索引参数的回调函数，这样Board才能把被点击Square的i传过来。
2. Board在渲染Square时，会把自己掌握的i通过这个回调传给Game的handleClick。

所以Game里的写法变成了：

<Board 
  squares={current.squares}
  onClick={(i) => this.handleClick(i)} // 这里的`i`是Board传过来的索引
/>

这个箭头函数的作用就是接收来自Board的索引i，再把它转递给Game自身的handleClick方法。如果这里写成() => this.handleClick()，Game的handleClick就拿不到具体是哪个Square被点击的信息，整个点击逻辑会直接失效。

完整的传递链条 #

最后整个调用流程是这样的：

• 用户点击Square → 触发Square的onClick事件
• Square的onClick调用Board里的() => this.props.onClick(i) → 将当前Square的索引i传给Game提供的回调
• Game的回调(i) => this.handleClick(i)接收到i，再调用this.handleClick(i) → 完成点击逻辑的处理

简单来说，就是把原来Board手里的索引信息，通过回调函数的参数，传递给了更上层的Game组件，这样Game才能正确处理每个Square的点击事件。

内容的提问来源于stack exchange，提问作者tinymarsracing