Question

我正在做React教程（https://reactjs.org/tutorial/tutorial.html）并且有一点我不明白：接近结尾（这里是代码：https://codepen.io/gaearon/pen/EmmOqJ?editors=0010）当handleClick函数被提升到最高级别（游戏）然后传递到Board然后传递到Square级别时，第一次游戏级别的符号变化＆＃34;到(i)，而不只是()。因此，代码现在是onClick={(i) => this.handleClick(i)}（第86行），而在董事会层面它是onClick={() => this.props.onClick(i)}（第14行）。是什么决定了我是否必须传递参数？

Answer 1

为了清楚起见，我将解释正在发生的事情背后的含义。

这是ES6功能：

() => {}

在ES5中，等效的是：

function(){}

在renderSquare中，会返回一个方形组件：

<Square
  value={this.props.squares[i]}
  onClick={() => this.props.onClick(i)}
/>

这意味着我们在单击Square时执行一个调用this.props.onClick(i)的函数。如您所见，i的参数renderSquare会传递给this.props.onClick。

在游戏组件中，我们呈现不同的Board组件。

<Board
  squares={current.squares}
  onClick={(i) => this.handleClick(i)}
/>

传递给onClick的函数有所不同。我们将此函数传递给onClick（在ES6中）：

(i) => this.handleClick(i)

在ES5中看起来像：

function(i){
  this.handleClick(i)
}.bind(this)

（绑定方法与函数作用域有关，你现在不需要关心，函数是重要的部分）

返回游戏组件render方法：

<Board
  squares={current.squares}
  onClick={(i) => this.handleClick(i)}
/>

如您所见，该函数具有参数i。它在Game组件中被分配给prop onClick。此onClick道具现已在Board Component上提供。在renderSquare中，我们只是调用相同的函数。我们刚刚传递给onClick道具的函数。现在只需调用Board组件的prop，就像那样：

this.props.onClick(i)

因此，当点击Square时，我们正在传递i。订单如下：

Square点击
在Board组件中分配onClick EventHandler称为
- ＆GT;调用this.props.onClick（i），意味着使用参数i

这就是为什么函数需要i的定义，如下所示：

(i) => this.handleClick(i)

i从Board组件传递到Game组件，并由handleClick函数使用。

React：了解传递函数

1 个答案: