反应：使用箭头功能传递道具

Question

在我的一个组件中，我使用的是：

<PhotoList update_photo={() => this.update_photo()} />

这里我传递一个函数作为道具，将照片更新为状态..

并在我的照片列表组件中，我有照片列表，我正在更新照片，如：

<div className="single-photo" onClick={() => this.props.update_photo(photo)}>

这里传递的是undefined而不是照片..但是当我像<PhotoList update_photo={this.update_photo.bind(this)} />和<div className="single-photo" onClick={this.props.update_photo.bind(this, photo)}>一样使用它时，它会起作用

有什么区别，为什么第一种方法不起作用？

Answer 1

在不知道如何定义this.update_photo()的情况下很难分辨，但我猜测问题是你传入的函数没有参数，但是你试图传入孩子的争论。

所以也许尝试连接这样的论点：

<PhotoList update_photo={(photo) => this.update_photo(photo)} />

然后this.update_photo应该能够根据传递给它的参数设置状态。

Answer 2

了解如何定义update_photo()方法会很有帮助，但我怀疑它与事实arrow functions don't bind their own this value有关。如果您使用箭头函数作为方法，this will be undefined。