> В чем особенность портала (React Portal) и почему его нужно использовать (React)

Уровень: middle · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор, Swetec, ООО Рокет Тех, Сфера, Арго

Стек: React

> Пример ответа

Порталы в React (ReactDOM.createPortal) позволяют рендерить дочерние элементы в DOM-узел, находящийся вне иерархии родительского компонента, но при этом сохраняют контекст React (пропсы, состояние, события). Основная особенность - разрыв визуального DOM-дерева при сохранении логического дерева компонентов.

Использовать порталы необходимо в следующих случаях:

Модальные окна, тултипы, дропдауны - чтобы избежать проблем с z-index, overflow: hidden или clip-path родительских контейнеров. Порталы гарантируют, что элемент отобразится поверх всего, независимо от вложенности.
Всплывающие уведомления (toast, snackbar) - их удобно размещать в отдельном контейнере (например, в <div id="portal-root">), чтобы не нарушать layout основного приложения.
Интеграция с внешними библиотеками (например, кастомные тултипы или оверлеи), где требуется точное позиционирование относительно viewport.

Пример:

JSX
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('portal-root')
  );
}

Важно: портал не меняет всплытие событий - события (onClick, onChange) продолжают работать в соответствии с React-деревом, а не DOM-деревом. Это позволяет обрабатывать клики внутри модалки в родительском компоненте без дополнительных костылей.