React函数组件同时接收props与父组件callback回调报错如何解决

核心原因 #

React函数组件仅第一个参数为父组件传入的所有props集合，第二个参数为React预留的ref转发参数，无法用来接收自定义属性，你之前的写法是对参数规则理解有误导致的。

两种常用实现方案 #

• 方案1：参数直接解构（推荐，最常用）
  直接在参数位置解构出需要的回调和其他属性，不需要的剩余属性可以用扩展运算符收集：

// 示例中解构了childToParent回调、title、listData属性，剩余所有未显式声明的属性都存在rest对象中
export default function List({ childToParent, title, listData, ...rest }) {
  // 调用回调直接写childToParent(要传给父组件的值)即可
  // 其他属性直接用title、listData即可
  // 剩余属性可以通过rest.xxx访问
}

• 方案2：保留完整props对象后二次解构
  如果你需要保留完整的props对象使用，可以先接收全量props，再单独解构出回调：

export default function List(props) {
  // 解构出回调，其他属性可以从otherProps或者直接从props取
  const { childToParent, ...otherProps } = props

  // 示例调用回调
  const handleClick = (item) => {
    childToParent(item)
  }

  // 其他逻辑
}

错误写法的报错原因 #

• ({childToParent}, props)写法：第二个参数并非自定义props，是React用于forwardRef的预留参数，自然拿不到父组件传的其他属性
• ({childToParent, props})写法：等同于要求父组件传入一个名为props的属性，父组件未传该属性时拿到的就是undefined，无法获取其他属性值

父组件调用示例 #

// 父组件内正常传参即可，不需要特殊处理
function Parent() {
  const handleChildCallback = (val) => {
    console.log('接收子组件传值：', val)
  }
  return (
    <List 
      childToParent={handleChildCallback}
      title="测试列表"
      data={['a','b','c']}
    />
  )
}

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