Mire jók a portálok a React-ben?

A React portáljai lehetővé teszik, hogy gyermek komponenseket olyan DOM-csomópontba rendereljünk, amely kívül esik az szülő komponens hierarchiáján. Ez hasznos, amikor egy elemet mások fölé kell helyezni, például modális ablakokat, eszköztippeket vagy legördülő menüket, hogy elkerüljük a CSS-stílusok, z-index vagy pozícionálási problémákat.

Portál használatának példája:

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

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

Ebben az esetben a modális ablak tartalma a "modal-root" azonosítójú elemben lesz renderelve, amely lehet a fő alkalmazás gyökérén kívül.