Порталы

createPortal(children, domNode) рисует компонент в другом месте DOM — обычно в конце body, — оставляя его в дереве React.

return createPortal(<div className="modal">{children}</div>, document.body);

Что важно знать

• Решает проблемы overflow: hidden и z-index у родителей для модальных окон, выпадающих меню и подсказок.
• События из портала всплывают по дереву React, а не DOM: клик в модальном окне дойдёт до обработчика родительского компонента.
• Для модальных окон — также управление фокусом и Escape; нативный <dialog> решает многое из коробки.