Reactjs 在Tic Tac Toe示例中理解传球功能作为道具

我是英语初学者。在React官方网站上的中，有3个组件：

方格

电路板（由3x3个方形元件组成）

游戏（棋盘之父）

这个想法是，每当一个正方形组件被点击时，点击的事件将传递到棋盘，并进一步传递到游戏组件。游戏组件将处理这个onClick事件

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

方形分量

<Square onClick={() => this.props.onClick(i)}/>

<button className="square" onClick={props.onClick}></button>

上述代码段来自index.js，位于：

我不明白的是，什么是：

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

this.handleClick（i）}/>

什么意思

---

i

在这里是什么意思？它来自哪里？如果我们删除

i

，那么为什么函数不起作用呢？

i

是其子对象的返回值（正方形的onClick事件的返回值）。

i

是其子对象的返回值（正方形的onClick事件的返回值）.

在代码中，Board组件有一个类型为function的props，单击其div时调用它

   onClick={() => this.props.onClick(i)}

---

因此，在其父级props上注入了一个函数，该函数接受第一个参数作为board的索引。在这种情况下，他们使用箭头函数来定义该函数

与代码中一样，Board组件有一个props类型的function，当其div被单击时调用

   onClick={() => this.props.onClick(i)}

因此，在其父级props上注入了一个函数，该函数接受第一个参数作为board的索引。在这种情况下，他们使用箭头函数来定义该函数

这是一个参数。箭头函数是编写函数的一种简化方法，其中

onClick属性的第一个参数通常是事件本身。因此，它只是将事件传递给

handleClick

它是一个。箭头函数是编写函数的一种简化方法，其中

---

onClick属性的第一个参数通常是事件本身。所以它只是将事件传递给

handleClick

i=>这个。
它与下面的
boundFunction
声明非常相似：

function myFunction(i) {
  this.handleClick(i);
}
const boundFunction = myFunction.bind(this);

onClick={i=>this.handleClick（i）}
是将属性传递给组件的方法。这允许您通过
This.props.onClick
访问Board组件内的功能，并通过
This.props.onClick（任意值）
执行该功能

编辑

<Square onClick={() => this.props.onClick(i)}/>

<button className="square" onClick={props.onClick}></button>

为了看得更清楚些，我正在用那里的通话顺序来完成我的回答

button.onClick（event）=>Square.props.onClick（）=>Board.props.onClick（i）=>Game.handleClick（i）

单击按钮会触发按钮标签上定义的
onClick
功能。此函数定义为
This.props.onClick
，它指的是正方形标记上定义的正方形属性onClick，如下所示：
（）=>This.props.onClick（i）
，其中
i
指的是正方形的索引。
因此，此函数是使用未使用的本机事件调用的。该函数可以这样定义
（event）=>this.props.onClick（i）
。由于未使用事件，因此声明此属性没有意义

在方形标记上，this.props.onClick

引用了这样定义的电路板属性onClick:

（i）=>this.handleClick（i）

。因此，点击按钮将触发游戏组件中定义的方法，该方法在棋盘组件中的某个位置定义了索引i值，可能在呈现所有方块的循环中。

i=>此方法。handleClick（i）

是一个。 它与下面的

boundFunction

声明非常相似：

function myFunction(i) {
  this.handleClick(i);
}
const boundFunction = myFunction.bind(this);

onClick={i=>this.handleClick（i）}

是将属性传递给组件的方法。这允许您通过

This.props.onClick

访问Board组件内的功能，并通过

This.props.onClick（任意值）

执行该功能

编辑

<Square onClick={() => this.props.onClick(i)}/>

<button className="square" onClick={props.onClick}></button>

为了看得更清楚些，我正在用那里的通话顺序来完成我的回答

button.onClick（event）=>Square.props.onClick（）=>Board.props.onClick（i）=>Game.handleClick（i）

单击按钮会触发按钮标签上定义的

onClick

功能。此函数定义为

This.props.onClick

，它指的是正方形标记上定义的正方形属性onClick，如下所示：

（）=>This.props.onClick（i）

，其中

i

指的是正方形的索引。 因此，此函数是使用未使用的本机事件调用的。该函数可以这样定义

（event）=>this.props.onClick（i）

。由于未使用事件，因此声明此属性没有意义

---

在方形标记上，this.props.onClick引用了这样定义的电路板属性onClick:

（i）=>this.handleClick（i）

。因此，点击按钮就会触发游戏组件中定义的

handleClick

方法，该方法在棋盘组件中的某个位置定义了索引i值，可能在呈现所有方块的循环中。

，这令人困惑，因为

i

@PFuster事实上，由于Board组件没有本机onClick处理程序，我不认为e指的是事件。如果你遵循调用链，

i

可能是一个整数，表示平方的索引。哦，糟糕，这是真的。在这种情况下，这是他们的自定义组件道具！我宁愿他们为

event

编写

e

，因为

I

@PFuster会让人困惑，事实上，由于Board组件没有本地onClick处理程序，我不认为e指的是事件。如果你遵循调用链，

i

可能是一个整数，表示平方的索引