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

Это полезно, когда нужно, например, вывести модальное окно, всплывающую подсказку или контекстное меню, которые визуально должны быть вне текущего контейнера, но логически связаны с компонентом.

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

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

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

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

Что такое порталы (createPortal) в React?