Question

我是React的初学者。在React官方网站的Tic Tac Toe Tutorial中，有3个组件：

平方
木板（由3x3正方形组件组成）
游戏（棋盘的父级）

这个想法是，每当单击一个方形组件时，被单击的事件都将传递到棋盘，再传递到游戏组件。游戏组件将处理此onClick事件。

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

handleClick(i)是板级组件内部的功能。

主板组件

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

平方分量

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

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

我不明白的是什么：

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

是平均值？

i在这里是什么意思？它从何而来？如果我们删除i，那么该函数为什么不起作用？

Answer 1

这是arrow function的参数。箭头函数是编写函数的简化方法，其中parenthesis are sometimes optional。

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

Answer 2

i => this.handleClick(i)是arrow function declaration。它与下面的boundFunction声明非常相似：

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

onClick={i => this.handleClick(i)}是将属性传递给组件的方法。这样，您就可以通过this.props.onClick访问Board组件中的功能，并通过this.props.onClick(whatEverValueYouWant)执行该功能。

修改

为了更清楚地了解情况，我正在用那里的通话顺序来填写答案。

button.onClick(event) => Square.props.onClick() => Board.props.onClick(i) => Game.handleClick(i)

单击按钮将触发在按钮标签上定义的onClick功能。此函数定义为this.props.onClick，它引用Square标记上定义的Square属性onClick，如下所示：() => this.props.onClick(i)，其中i引用Square的索引。因此，将使用未使用的本机事件来调用此函数。该函数可能已经像(event) => this.props.onClick(i)这样定义。由于未使用事件，因此没有必要声明此属性。

在Square标签上，this.props.onClick指的是这样定义的Board属性onClick：(i) => this.handleClick(i)。因此，只需单击该按钮即可触发在Game组件中定义的handleClick方法，并在Board组件中某个位置（可能是在渲染所有Square的循环中）定义的索引i值。

Answer 3

i是他的孩子的返回值（Square的onClick事件的返回值）。

Answer 4

如代码中所示，Board组件具有一个props类型的函数，当其div被单击时会调用

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

因此，在道具的父项上注入了一个函数，该函数接受第一个参数作为木板索引。在这种情况下，他们使用箭头功能来定义该功能道具。

在井字游戏示例React中了解将传递函数作为道具

4 个答案: