ReactJS: Disable mouse events in child components of parent - reactjs

Question

I have a components hierarchy like this:
<parent>
<someWrapper1>
<child>
<child>
<someWrapper2>
<child>
<child>
Each child component handles a bunch of mouse events on it's own where some are D3 wrappers managing onDragStart and onClick mouse events.
I am looking for a way to disable all mouse events in the <someWrapper1/>, <someWrapper2/> components, as well as in the <child/> components, based on the parent's component state.
One solution, would be to pass the prop of disable to the wrapper components, and to also pass those down to each child and then into
each handler to disable or enable mouse events. I want to avoid this as it will be hard to maintain.
I am looking for a nicer solution where I can disable all mouse events in all components from the parent component.
Thanks!

Answer 1

If I understand correctly, you're looking to disable mouse events on specific sub-trees of your DOM. In that case, you could use the CSS pointer-events: none; rule to achieve this.
For example, to restrict mouse events on an element/component and it's children, you could create a style object with a pointer-events key and none value, and apply this to <someWrapper1> components to dynamically enable/disable mouse events on those components (and their descendants):
/* Your components render method */
render() {
/* Acquire the disableEvents value from state, etc */
const disableEvents = true;
/* Dynamically compute style for wrapper components
to control mouse interactivity */
const wrapperStyle = {
"pointer-events": disableEvents ? "none" : "unset"
};
/* Apply dynamic styles to wrappers. When disableEvents
is true, mouse events will be disabled on someWrapper1
and child descendants */
return (<parent>
<someWrapper1 style={wrapperStyle}>
<child />
<child />
</someWrapper1>
<someWrapper1 style={wrapperStyle}>
<child />
<child />
</someWrapper1>
</parent>)
}