创建可以传递参数而无需创建新组件的函数

我的问题与这个问题有关React用于渲染函数中的绑定函数。

以下不是好的做法：

render() {
   <div onClick={this.callFunction.bind(this)}/>
}

因为每次重新渲染都会向页面添加一个新功能，最终导致浏览器内存不足。

解决方案是这样做：

constructor() {
   this.callFunction = this.callFunction.bind(this);
}

render() {
   <div onClick={this.callFunction}/>
}

问题是当我想将一个值传递给函数时。

我知道我可以使 div 成为子组件，并通过回调传递参数，但如果 div 在整个应用程序中仅使用一次，这似乎不明智。我承认我可以完成这项工作，但这不是这个问题的范围。

我也知道这个解决方案：

render() {
   <div onClick={() => this.callFunction.call(this, param)}/>
}

也好不到哪里去，因为它仍在创建新功能。

所以我的问题是，如何创建一个可以将参数传递给其中的函数，而无需创建新组件，并且无需在每个渲染上绑定新函数？

您无法避免创建第二个组件，因为您需要传递函数引用作为事件处理程序，这将在事件触发时由浏览器执行。

所以问题不在于绑定，而在于您需要传递引用，而引用无法接收参数。

EDIT
顺便说一句，如果您不喜欢绑定或匿名箭头函数的语法和噪音，您可以使用柯里化。
我在a中发布了一个例子不同的问题 https://stackoverflow.com/a/45448802/3148807如果你觉得有趣。但这并不能解决问题，这只是传递新引用的另一种方法（我发现它是最简洁的）