Antd Popover嵌套自定义函数组件无法触发弹窗问题求助

问题原因 #

Antd Popover 会给直接子元素绑定触发事件（如click），但如果子元素是自定义函数组件，这些事件不会自动传递到组件内部的原生可点击元素（比如button）——因为自定义组件默认不会转发外部传入的 props 到内部元素，导致 Popover 无法捕获点击事件触发弹窗。

解决方案 #

让自定义组件透传所有外部 props到内部的原生按钮上，这样 Popover 绑定的事件就能被正确捕获。

修改后的自定义组件代码 #

const CustomButton = (props) => {
  // 将外部传入的所有props展开到内部button元素上
  return <button {...props}>Custom one</button>
}

完整使用示例 #

import { Popover } from 'antd';

const CustomButton = (props) => {
  return <button {...props}>Custom one</button>;
};

const App = () => {
  const content = <div>弹窗内容</div>;
  
  return (
    <Popover content={content} title="标题" trigger="click">
      <CustomButton />
    </Popover>
  );
};

这样修改后，点击自定义按钮就能正常触发 Popover 弹窗了。

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