Reactjs React+Nodejs=>作为道具发送函数之间的差异

我不明白为什么我必须发送这种道具来制作作品：

clickToDelete={() => this.deleteElement(item.id)}

及

当它在同一个文件中时，我不能写入=>：

---

onClick正在调用delete，即使我没有单击它。

因为这会立即调用函数call deleteElementitem.id，并将其结果设置为clickToDelete属性：

clickToDelete={this.deleteElement(item.id)}

这个结果可能不是一个函数。您不希望在渲染时立即调用删除操作，而是希望在单击元素时调用该操作。因此，您需要将clickToDelete属性设置为函数，而不是函数的结果。这就是：

clickToDelete={() => this.deleteElement(item.id)}

这只是较短的现代语法，其中有一些细微的差异，在这里对以下内容不重要：

clickToDelete={function () { this.deleteElement(item.id); }}

这样，您提供的只是一个函数，还没有任何东西调用它。单击该元素时，该元素将调用您提供的函数，该函数中唯一的代码行是：

this.deleteElement(item.id)

您提供的另一个示例也演示了这个概念。请注意，此代码不调用函数：

onClick={this.deleteFirstMovie}

---

因为函数名后面没有括号。这是将函数本身设置为onClick属性，单击元素时将调用该函数。

因此，onClick接受一个函数，该函数在您单击该项时执行。 当你打电话的时候

<button onClick={this.deleteFirstMovie}>Delete First Element</button>

实际上，您正在调用该函数，而不是传递它，该函数的结果将成为您的单击处理程序。 如果要避免这种行为，并且仍然能够向处理程序传递额外的参数，则必须使用如下匿名函数：

() => this.deleteElement(item.id)

在这种情况下，处理程序将是一个名为anonymous的新函数，因为您没有给它命名，当您单击按钮时，将调用deleteElement方法

---

希望我说得很清楚：

完全理解，谢谢。理解，谢谢你的时间

<button onClick={this.deleteFirstMovie}>Delete First Element</button>

clickToDelete={this.deleteElement(item.id)}

() => this.deleteElement(item.id)