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

时间:2017-01-24 05:07:28

标签: javascript reactjs ecmascript-6

在我的一个组件中,我使用的是:

<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)}>一样使用它时,它会起作用

有什么区别,为什么第一种方法不起作用?

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

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

相关问题