Na čo sú portály v React-e?

Portály v Reactu umožňujú vykresľovať detské komponenty do uzla DOM, ktorý sa nachádza mimo hierarchie rodičovskej komponenty. To je užitočné, keď je potrebné zobraziť prvok nad ostatnými, napríklad modálne okná, tooltipy alebo rozbaľovacie menu, aby sa predišlo problémom s CSS štýlmi, z-index alebo pozicovaním.

Príklad použitia 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')
  );
}

Tu bude obsah modálneho okna renderovaný v elemente s ID "modal-root", ktorý môže byť mimo hlavného koreňa aplikácie.