Вопрос проверяет понимание того, как React работает с DOM-деревом и почему иногда нужно нарушать визуальную иерархию компонентов.
Модальные окна реализуют через порталы, чтобы рендерить их вне обычной DOM-иерархии. Это помогает избежать проблем с z-index, overflow и позиционированием. При этом модалка остаётся частью React-дерева. Порталы позволяют сохранить логику React и упростить стилизацию. Это стандартный и рекомендуемый подход.
Модальные окна визуально должны находиться поверх всего интерфейса, но логически — принадлежать текущему экрану.
Portal — это механизм React, который позволяет рендерить компонент в другой DOM-узел, не нарушая иерархию React-компонентов.
Если рендерить модалку внутри обычного DOM-дерева:
она может обрезаться из-за overflow: hidden
возникают конфликты z-index
усложняется позиционирование
страдает доступность (focus, scroll)
Портал позволяет:
Рендерить модалку, например, в document.body
Избежать влияния CSS-ограничений родителя
Сохранить контекст, пропсы и state
Пример:
ReactDOM.createPortal(
<Modal />,
document.body
);
Хотя DOM-узел другой:
события всплывают корректно
Context продолжает работать
логика приложения не ломается
Порталы позволяют корректно реализовывать модальные окна, отделяя визуальное расположение от логической структуры приложения.