ReactJS: отключить события мыши в дочерних компонентах родителя

Question

У меня есть иерархия компонентов, подобная этой:

<parent>
   <someWrapper1>
        <child>
        <child>
   <someWrapper2>
       <child>
       <child>

Каждый дочерний компонент обрабатывает кучу событий мыши самостоятельно, а некоторые являются оболочками D3, управляющими onDragStart и onClick событиями мыши.

Я ищу способ отключить все события мыши в компонентах <someWrapper1/>, <someWrapper2/>, а также в компонентах <child/> на основе состояния компонента родителя.

Одним из решений было бы передать реквизиты отключения компонентам обертки, а также передать их каждому дочернему элементу, а затем в каждый обработчик для отключения или включения событий мыши.Я хочу избежать этого, так как это будет трудно поддерживать.

Я ищу более подходящее решение, в котором я могу отключить все события мыши во всех компонентах родительского компонента.

Спасибо!

Answer 1

Если я правильно понимаю, вы хотите отключить события мыши на определенных поддеревьях вашей DOM.В этом случае вы можете использовать правило CSS pointer-events: none; для достижения этой цели.

Например, чтобы ограничить события мыши для элемента / компонента и его дочерних элементов, вы можете создать объект стиля с ключом pointer-events и значением none и применить его к <someWrapper1> компонентам для динамическоговключить / отключить события мыши для этих компонентов (и их потомков):

/* 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>)

}