Hack Frontend Community

Что такое Portal в React

Portal (портал) — это механизм в React, который позволяет рендерить компонент вне основного DOM-дерева, но при этом он всё равно остаётся частью React-иерархии.

Это удобно, когда нужно отобразить модальные окна, тултипы, дропдауны, которые не должны быть вложены в родительские стили (например, overflow: hidden, z-index, transform).

Как создать портал?

React предоставляет специальный метод:

ReactDOM.createPortal(children, container)
  • children — элемент, который нужно отрисовать
  • container — DOM-элемент, в который будет помещён JSX вне текущего дерева

Пример использования портала

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root') // вне корня приложения
  );
}

HTML

<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- сюда рендерится портал -->
</body>

Теперь компонент Modal не будет обёрнут родительскими стилями #root, но React по-прежнему будет управлять его состоянием и жизненным циклом.

Где используются порталы?

  • Модальные окна
  • Тултипы
  • Дропдауны
  • Уведомления
  • Side-панели

Преимущества

  • Выход из ограничений CSS-контейнеров
  • Отсутствие конфликтов с z-index, overflow, position
  • React-приложение остаётся управляемым (хендлеры, стейт, refs работают как обычно)

Важно помнить

  • Порталы не создают новый контекст React, они используют тот же, что и родитель
  • При этом могут ломать верстку, если не учитывать глобальные стили

Вывод:

Portal — это мощный инструмент в React, когда вы хотите визуально вырваться из родительского DOM, но при этом сохранить контроль React. Используйте их для модалок, тултипов и любых UI-элементов, которые должны быть "поверх" всего.