为什么直接给React自定义组件绑定onClick事件不会触发？

问题原因 #

• React中针对原生DOM元素的onClick绑定是原生事件监听，而给自定义组件传递的onClick本质是普通props属性，不会自动绑定到组件内部的DOM节点上。
• 你的Burger组件没有接收父层传入的onClick props，也没有将其绑定到内部可点击的DOM元素上，因此父层绑定的回调函数不会触发。
• 用div包裹组件时是直接给原生DOM绑定点击事件，点击后事件冒泡到外层div就会触发回调，因此可以正常执行。
• 你提到Burger内部本身绑定了onClick处理内部状态，两者不存在冲突，只需要在内部逻辑执行完成后主动调用父层传入的onClick即可。

推荐处理方案 #

方案1：显式透传onClick props（最适配你的场景） #

在Burger组件内部接收父层传入的onClick作为props，绑定到内部可点击根节点，同时保留原有内部逻辑：

// Burger 组件内部示例代码
const Burger = ({ onClick: parentOnClick }) => {
  const [isCross, setIsCross] = useState(false);

  const handleClick = (e) => {
    // 原有内部切换汉堡/叉号状态的逻辑
    setIsCross(prev => !prev);
    // 触发父层传入的点击回调，支持透传事件对象
    parentOnClick?.(e);
  };

  return (
    <button onClick={handleClick}>
      {/* 原有汉堡菜单UI逻辑 */}
    </button>
  );
};

父层直接按原生元素的用法绑定即可，状态和事件逻辑都保留在上层，符合你的预期：

<Burger onClick={() => setMenuIsOpen(prev => !prev)} />

方案2：全量透传props（适合通用基础组件） #

如果Burger是通用组件，需要支持所有原生按钮的属性配置，可以把未显式声明的props全部透传给内部根元素：

const Burger = ({ children, ...restProps }) => {
  const [isCross, setIsCross] = useState(false);

  const handleClick = (e) => {
    setIsCross(prev => !prev);
    restProps.onClick?.(e);
  };

  return (
    <button {...restProps} onClick={handleClick}>
      {children}
    </button>
  );
};

不推荐的写法 #

不建议使用外层包裹div的写法，除了会产生冗余DOM节点外，还可能出现事件冒泡异常的问题：比如组件内部阻止了事件冒泡会导致外层div的事件不触发，或者点击组件内部非交互区域意外触发回调。

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