DOM и React Senior Паттерны компонентов обновлено
Портал
Условие
Компонент рисует содержимое в другой узел DOM через портал, но остаётся в дереве React - событие клика должно всплывать к родителю.
Что проверяют тесты
рисует вне своего поддерева
событие всплывает по дереву React
Как подойти
Портал решает проблему overflow: hidden и z-index у родителя - узел физически переносится в body, а логически остаётся на месте. Отсюда неочевидное следствие: события всплывают по дереву React, а не по DOM, поэтому onClick родителя сработает. Это и удобно (контекст доступен), и опасно (клик «внутри» модалки может закрыть выпадашку-родителя).
Подсказки: 2
- ReactDOM.createPortal принимает элемент и целевой DOM-узел.
- Дерево React и дерево DOM после портала расходятся - события ходят по первому.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.