如何在使用父组件状态的同时将函数引用传递给子组件？答案

【问题标题】：How to pass a function reference to a child component while also using the state of the parent component?如何在使用父组件状态的同时将函数引用传递给子组件？
【发布时间】：2021-10-25 17:19:22
【问题描述】：

我不知道具体该怎么说，所以我会做一些伪代码来说明：

我有一个主要组件，它有一个 map 函数，它遍历一个值数组。 map 函数内部是一个引用处理函数的功能性道具。我不仅希望能够从 onClick 返回一个值，而且还需要访问仍然在组件的映射实例中的变量。

parent
[1,2,3].map(num => ( <child funcProp={handleClick} )

in child:
const {funcProp} = props
---code that does calc or state
funcProp(res)

我从子组件中得到了我想要的结果，但我也需要来自调用映射的参数。因此，例如，我想（如果我们在地图中的第 2 位）我想从子组件 with 返回处理函数的 num 2 的 res。我确定有些语法我忘记了。

【问题讨论】：

最简单的方法是传递一个新的匿名函数funcProp={(child_args) => handleClick(num, child_args)}。
天哪！我没有将它包含在匿名函数中！我想那是我错了！有用。哇 - 多么糟糕的时刻。 ://

标签： javascript reactjs react-functional-component

【解决方案1】：

你可以创建一个函数，让你访问你想要的值

[1,2,3].map(num => ( <child funcProp={() => handleClick(num)} )

或者在子道具中也传递值

[1,2,3].map(num => ( <child num={num} funcProp={handleClick} )

【讨论】：

【解决方案2】：

闭包的规则仍然适用于 React。创建一个调用handleClick 本身的匿名函数。此函数将有权访问地图回调参数：

[1,2,3].map((num) => {
  return <child funcProp={() => handleClick(num)} />
})

请注意，使用此模式，handleClick 将不再接收来自child 组件中对funcProp 的调用的参数。如果您仍然希望handleClick 接收这些参数，则必须显式传递它们：

[1,2,3].map((num) => {
  return <child funcProp={(...args) => handleClick(num, ...args)} />
})

或者，如果您希望 num 成为 handleClick 的最后一个参数：

[1,2,3].map((num) => {
  return <child funcProp={(...args) => handleClick(...args.concat(num))} />
})

您可以避免使用匿名函数，并使用Function.prototype.bind 创建handleClick 的绑定副本，并带有固定的第一个参数num：

[1,2,3].map((num) => {
  return <child funcProp={handleClick.bind(null, num)} />
})

在这种情况下，我们将handleClick 绑定到上下文null。这可能适合也可能不适合您的用例 - 需要考虑。

【讨论】：

【解决方案3】：

在这种情况下，您可能需要在传递函数时绑定“this”。

如果我使用您提到的示例，那么这可能会有所帮助-

handleClick.bind(this)

【讨论】：