Вопрос проверяет понимание структуры DOM и способов рендеринга элементов вне текущего дерева.
React Portals позволяют рендерить компонент в другой части DOM, не меняя структуру React-компонентов. Это часто используется для модальных окон, тултипов и выпадающих меню. Такой подход помогает избежать проблем с z-index и переполнением контейнеров. Логика компонента при этом остается в том же месте.
Иногда элемент должен отображаться вне родительского контейнера, но логически оставаться внутри компонента.
Определение:
Portal — это способ рендеринга React-элемента в произвольный DOM-узел с помощью ReactDOM.createPortal.
Пример
ReactDOM.createPortal(
<Modal />,
document.getElementById("modal-root")
);
Как это работает
Компонент остается в дереве React.
В DOM он размещается в другом месте.
События продолжают работать как обычно.
Когда используется
Модальные окна.
Тултипы.
Контекстные меню.
Почему это важно
Контейнеры могут иметь overflow: hidden или ограничения по позиционированию.
Portals позволяют корректно отображать элементы поверх интерфейса, не нарушая архитектуру компонентов.