如何向子组件传递函数引用时同时获取父级map参数和子组件返回值

方案1：箭头函数闭包捕获（最常用） #

直接在父组件的map遍历内，用匿名箭头函数包裹原处理函数，提前绑定当前遍历的上下文变量，子组件无需做任何修改：

// 父组件遍历逻辑
[1,2,3].map(num => ( 
  <Child 
    funcProp={(res) => handleClick(num, res)} 
  />
))

// 父组件处理函数定义
const handleClick = (num, res) => {
  // 可同时获取遍历上下文num、子组件返回的res两个参数
  console.log('对应遍历值：', num, '子组件返回结果：', res)
}

// 子组件逻辑保持原有写法即可，无需调整
const { funcProp } = props
// 内部计算/状态处理完成后调用回调
funcProp(res)

原理是利用JavaScript闭包特性，每一轮map循环的num变量会被当前的匿名函数捕获保存，子组件触发回调时传入的res会作为第二个参数传入处理函数。

方案2：bind绑定参数 #

也可以使用bind方法预先绑定上下文变量，效果和箭头函数方案完全一致：

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

内容的提问来源于stack exchange，提问作者Joel Hager