Что такое портал в React и зачем он нужен?

Что представляет собой портал в React?

• React-портал позволяет рендерить компоненты за пределами основного DOM-дерева
• и применяется для элементов с особыми требованиями к позиционированию, например модальных окон и тултипов
• Он создаётся с помощью ReactDOM.createPortal(child, container)
• и сохраняет контекст React, даже если компонент находится в другой части DOM
• Это упрощает работу со слоями и стилями и помогает избежать конфликтов CSS
• Благодаря порталу элемент можно отобразить поверх остальных, не меняя структуру приложения
• Порталы используют для модальных окон, всплывающих уведомлений и оверлеев

Подробный ответ

Основной ответ

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

Ключевые моменты

• Для создания портала используется метод ReactDOM.createPortal(children, container): children обозначает JSX, который нужно отрендерить, а container — DOM-узел, куда этот JSX будет помещён.
• При этом визуальное перемещение элемента в другую часть DOM не нарушает работу React: компоненты продолжают сохранять собственную логику, состояние и контекст, как в исходной иерархии.
• Порталы помогают решить задачу выхода за рамки текущего родителя в DOM. Их применяют, например, для всплывающих окон, dropdown-меню и overlay’ев, когда требуется точно управлять z-index и визуальной модальностью интерфейса.

Практический контекст

В больших приложениях на React 18+ порталы применяют для реализации модальных окон с управлением фокусом и анимациями, а также для размещения интерфейсных слоёв поверх основного содержимого. При этом сохраняется логика React, а контроль CSS и событий за пределами основной части DOM становится проще.