Portal рендерит потомков в другом месте DOM (вне иерархии DOM родителя), при этом сохраняя их в дереве компонентов React — поэтому контекст, пропсы и события работают так, как если бы они были вложены обычным образом.
{ createPortal } ;
() {
(
,
.()
);
}
Модальные окна, подсказки, выпадающие списки и уведомления должны выбраться из ограничивающего overflow: hidden или z-index стеки контекста предка. Если модальное окно было глубоко вложено в карточку с overflow: hidden, оно будет обрезано. Рендеринг его в body через portal полностью избегает этой проблемы.
Это тонкий и мощный момент: даже если DOM модального окна находится под body, onClick на предка React всё ещё срабатывает, потому что всплытие событий следует дереву React, а не дереву DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal решает проблему позиционирования, но не доступности. Для диалогов вам всё ещё нужны захват фокуса, role="dialog"/aria-modal и закрытие по Escape (или используйте встроенный элемент <dialog>, который обрабатывает большую часть этого).