javascript - 立即调用箭头函数作为 React prop

Question

我注意到我的 React 项目中有一个有趣的问题。我已经通过第一种方法解决了这个问题，但我想知道作为 prop 传递时以下回调方法之间的区别:

<强>1。箭头函数(在render()内工作正常)

    changeImage={ () => this.handleImageUploadModal('OPEN') }

<强>2。函数引用(未捕获的 RangeError:超出最大调用堆栈大小)

    changeImage={ this.handleImageUploadModal('OPEN') }

Answer 1

第一个是函数定义，您告诉它“在更改时执行此函数”。重要的词是“定义”:你不是执行它，而是定义它。它没有“启动”命令:

changeImage={ () => {return this.handleImageUploadModal('OPEN')}() }
// If you want it called instantly, you have to start it:     --^^

<小时/>

您应该将第二个作为参数来读取。一个更明显的例子:

showImage={ this.shouldImageBeShown() }

该函数将立即被调用以确定我们是否应该显示图像，并返回 true/false -> showImage={true}。

如果你想输入函数名而不触发它，你可以删除函数的 () 部分，这样它就不会被调用，而只会被声明:

changeImage={ this.openImageUploadModal }