16 апреля 2025 г. (изменено: 16 апреля 2025 г.)
Канал: @cherkashindev
Особенности событий порталов в React ⚛️
Сегодня продолжаем внимательно читать документацию React. На прошлой неделе пофиксили небольшой баг, который возник из-за особенности всплытия событий при работе с порталами.
createPortal
Метод createPortal позволяет рендерить компонент вне текущей DOM-иерархии, но при этом он остаётся частью React-дерева.
События из порталов распространяются в соответствии с деревом React, а не деревом DOM. Например, если вы нажмёте внутри портала, и портал обёрнут в `
`, сработает этот обработчик `onClick`. Если это вызывает проблемы, либо остановите распространение события (stopPropogation()) внутри портала, либо переместите сам портал выше в дереве React.
Что у нас случилось❓
В проекте мы недавно переписали тулбокс — панель, из которой можно перетаскивать элементы при создании workflow.
Из-за ограничений мы отказались от нативного drag-and-drop и использовали старый кастомный хук на обычных mousedown`/`mousemove.
Что фиксили? 🪲
В общем, всё работал, но пользователь мог начать перестаскивать элемент нажав на всплывающую подсказку (описание на картинке).
Происходило это потому, что при нажатии на подсказку событие всплывало к родительскому компоненту элемента тулбокса, на котором вызывался обработчик mousedown.
Причина в том, что React-ивенты всплывают по React-дереву, а не DOM. Всё как в доке. А пофиксили это простым добавлением stopPropogation() в onMouseDown компонента подсказки.