React中能否直接为子组件绑定事件监听器而非通过props传递？

当然可以，但关键在于自定义组件内部需要正确处理这个onClick props——React不会自动把你传给自定义组件的事件属性绑定到它内部的DOM元素上，这和原生DOM组件的行为不一样。

具体说明 #

当你在父组件里给自定义组件<Child>添加onClick时，这个onClick只是一个普通的props，和你之前用的handleClickprops本质没有区别。要让它生效，子组件需要显式接收这个props，并把它绑定到内部的原生DOM元素上。

修改后的可行示例 #

父组件

function Parent(){
  function handleClick(){
    console.log("click");
  }
  return (
    <Child onClick={handleClick} />
  )
}

子组件（显式接收并绑定）

function Child({ onClick }){
  return (
    <button onClick={onClick}>Child</button>
  )
}

更灵活的写法：传递所有剩余props #

如果子组件只是一个“包装”原生元素的容器，你可以用扩展运算符...rest把所有props（包括事件监听器）直接传递给内部的DOM元素，这样不用逐个声明事件props：

function Child(props){
  return (
    <button {...props}>Child</button>
  )
}

这种方式下，父组件不仅可以传onClick，像onMouseEnter、className等其他属性也能直接生效，和使用原生<button>的体验一致。

总结 #

• 给自定义组件加onClick本质还是props传递，和你之前的handleClick方式逻辑相同，只是命名更符合React的原生事件惯例。
• 必须在子组件内部把事件props绑定到具体的原生DOM元素上，才能触发对应的事件回调。

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