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

Портал создаётся с помощью функции ReactDOM.createPortal(child, container), где child — React-элемент, а container — DOM-узел, куда будет помещён этот элемент.

Особенности:

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

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

import React from 'react';
import ReactDOM from 'react-dom';

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

export default Modal;

Здесь содержимое модального окна будет отрисовано в элементе с id modal-root, который находится вне основного корня приложения.

Что такое React Portal, как он работает и его особенности?