React父组件如何拦截所有子组件的点击事件？

Question

再不用addEventListener的情况下，React父组件如何拦截所有子组件的点击事件。

只使用类似

• onClkick
• onClickCapture

这样的事件能实现吗？

Answer 1

自己查查React.children.map clone的元素onClick={() => {props.click}} 试试？

Answer 2

直接在顶层div绑定onClick，因为react的事件是合成事件，点击事件会冒泡到顶层dom

Answer 3

父组件可用通过React.Children获取所以子组件，通过React.cloneElement覆盖onClick事件达到拦截效果

{React.Children.map(children, (child) => React.cloneElement(child, { onClick: () => {} }))}

不满足还能对child深层递归