Na co jsou portály v Reactu?

Portály v Reactu umožňují vykreslovat podřízené komponenty do uzlu DOM, který se nachází mimo hierarchii rodičovské komponenty. To je užitečné, když je třeba zobrazit prvek nad ostatními, například modální okna, tooltipy nebo rozbalovací menu, aby se předešlo problémům s CSS styly, z-index nebo pozicováním.

Příklad použití portálu:

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

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

Zde bude obsah modálního okna vykreslen do elementu s ID "modal-root", který může být mimo hlavní kořen aplikace.