React: Что такое Portals в React и в каких случаях их нужно использовать для рендеринга модальных окон и всплывающих подсказок?

## Что такое React Portals?

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

jsx
import ReactDOM from ‘react-dom’;

function Modal({ children }) {
return ReactDOM.createPortal(

,
document.getElementById(‘modal-root’)
);
}

## Зачем нужны Portals?

По умолчанию React рендерит компоненты строго внутри DOM-узла родителя. Это создаёт проблемы при работе с модальными окнами, тултипами и дропдаунами, потому что CSS-свойства родителя (например, `overflow: hidden`, `z-index`, `transform`) могут обрезать или скрывать дочерний элемент.

Portals решают эту проблему, позволяя «вырваться» из DOM-иерархии родителя и разместить элемент в любом другом DOM-узле — как правило, прямо в `document.body`.

## Когда использовать Portals?

**1. Модальные окна (Modal dialogs)**
Модальные окна должны отображаться поверх всего остального контента. Если рендерить их внутри компонента с `overflow: hidden` или низким `z-index`, они будут обрезаться или перекрываться. Портал позволяет вынести модальное окно в `body`, избежав этих проблем.

**2. Всплывающие подсказки (Tooltips)**
Тултипы часто позиционируются относительно элемента, но должны отображаться поверх всего. Если родительский контейнер имеет `overflow: hidden`, тултип будет обрезан. Портал решает эту проблему.

**3. Выпадающие меню (Dropdowns)**
Аналогично тултипам, дропдауны могут обрезаться родительским контейнером. Портал позволяет рендерить их на уровне `body`.

**4. Уведомления и снэкбары (Notifications/Snackbars)**
Пуш-уведомления должны быть зафиксированы на экране вне зависимости от текущего DOM-контекста.

## Важные особенности Portals

— **Всплытие событий (Event Bubbling)**: события, сгенерированные внутри портала, всплывают по React-дереву, а не по DOM-дереву. Это значит, что обработчики событий родительского компонента в React будут срабатывать, даже если DOM-узел портала находится вне родителя.
— **Контекст (Context)**: порталы имеют доступ к React Context родительского компонента, что позволяет передавать данные без дополнительных пропсов.
— **Управление фокусом**: при использовании модальных окон важно правильно управлять фокусом для обеспечения доступности (a11y).

## Пример использования с модальным окном

jsx
const modalRoot = document.getElementById(‘modal-root’);

function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return ReactDOM.createPortal(

,
modalRoot
);
}

В HTML нужно добавить: `

` рядом с `

`.

## Итог

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