Reactjs 当child是react组件而不是DOM元素时，如何调整react.children的onClick事件

当创建一个使用children道具的组件时，我想调整它的onclick事件。如果子元素是DOM元素（例如Div），这很容易，但是如果它是react组件，我只能编辑组件道具，而不能编辑结果DOM元素的道具。 编辑：子组件应该是抽象的，不能进行编辑

以下内容适用于DOM元素：

export const Wrapper = ({ children }) => {
  const handleOnClick = () => {};
  return (
    React.cloneElement(children, { ...children.props, onClick: handleOnClick })
  )
}

const App = () => {
  return (
    <Wrapper>
      <div /> // This div has a onclick event injected by wrapper
    </Wrapper>
  )
}

---

也许试试这样的

const InnerWrap = ({props}) => {
  return (
    <div {...props} />
  )
}

constinnerwrap=（{props}）=>{
返回(
)
}

onClick事件可以作为道具传递给

InnerWrap

，因为它是一个组件。如果您不介意在

包装器

组件中再添加一个

，您可以在

包装器

组件上添加

onClick

事件。或者，如果您希望将事件侦听器添加到某些特定元素，您可以在

包装器
组件上使用
ref
，然后使用一个特定的
className
查找它的子元素，并将事件侦听器添加到其中。@dev_junwen我决定使用第一个选项，因为我无法使refs工作。虽然它对css有潜在的影响。我没有访问内部组件的权限，所以这对我来说不起作用。
...
const childRef = useRef(null);
useLayoutEffect(() => {
  //childRef.current is Null!
  childRef.current.addEventListener('onClick', handleOnClick);
}, [childRef]);

React.cloneElement(children, { ref: childRef })

...

const InnerWrap = ({props}) => {
  return (
    <div {...props} />
  )
}