自定义ShowOffer组件点击事件无法切换modalVisible状态如何解决

问题根因 #

React 自定义组件不会自动透传原生事件和 DOM 属性，你给ShowOffer组件绑定的onClick只是作为普通 props 传入组件，没有被绑定到组件内部的原生 button 元素上，因此点击时不会触发回调。原生 button 属于原生 DOM 元素，绑定的onClick会直接挂载到 DOM 节点上，因此可以正常触发。

修复方案 #

修改ShowOffer组件的实现，接收外部传入的onClick属性并绑定到内部的原生 button 上即可，两种实现方式可选：

1. 单独透传 onClick 属性

const ShowOffer = ({ onClick, children }) => {
  // 此处将外部传入的onClick绑定到内部原生按钮
  return <button onClick={onClick}>{children}</button>
}

2. 批量透传所有外部传入属性（适合需要支持原生button所有属性的场景）

const ShowOffer = ({ children, ...restProps }) => {
  // 所有外部传入的属性都会透传给内部原生按钮，包括onClick、className、disabled等
  return <button {...restProps}>{children}</button>
}

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