Что такое портал в React и как его использовать, чтобы рендерить компоненты вне стандартной иерархии DOM?

Определение

Порталы — это фича React'а, которая позволяет рендерить дочерние компоненты в DOM-узел, который существует вне DOM-иерархии родительского компонента. Это рекомендуемый подход, когда нужно рендерить контент за пределами обычного дерева компонентов.

Как работают порталы

Порталы используют API ReactDOM.createPortal() с двумя обязательными аргументами:

• Первый аргумент: Любой рендерируемый React-потомок (элемент, строка или фрагмент)
• Второй аргумент: Целевой DOM-элемент, где будет отрендерен контент

Базовый синтаксис

Типичные случаи использования

Порталы особенно полезны для:

• Модальных окон и диалогов — рендеринга оверлейного контента, который не должен быть ограничен стилями родителя
• Тултипов и поповеров — отображения контента поверх других элементов
• Выпадающих меню — обхода ограничений родителя с overflow: hidden
• Уведомлений — показа алертов на уровне приложения, а не внутри компонента

Основные преимущества

• Дочерние компоненты остаются логически связанными с родителем в React-дереве, сохраняя всплытие событий и контекст
• Обеспечивает CSS-изоляцию, рендеря контент за пределами ограничений родителя вроде overflow или z-index
• Позволяет создавать более чистые структуры компонентов, отделяя логику разметки от иерархии DOM

Важные моменты

Хотя порталы рендерятся вне иерархии компонентов в DOM, они сохраняют свою позицию в React-дереве компонентов — это означает, что всплытие событий и контекст по-прежнему корректно распространяются через родительские компоненты.