Что такое React Portals и зачем они нужны?

Question

React Portals позволяют рендерить компонент в другой части DOM, не меняя структуру React-компонентов. Это часто используется для модальных окон, тултипов и выпадающих меню. Такой подход помогает избежать проблем с z-index и переполнением контейнеров. Логика компонента при этом остается в том же месте.

YeaHub · Accepted Answer

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