A cosa servono i portali in React?

I portali in React consentono di rendere i componenti figli in un nodo DOM che si trova fuori dalla gerarchia del componente genitore. Questo è utile quando si desidera visualizzare un elemento sopra gli altri, come finestre modali, tooltip o menu a discesa, per evitare problemi con stili CSS, z-index o posizionamento.

Esempio di utilizzo di un portale:

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

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

Qui, il contenuto della finestra modale verrà renderizzato nell'elemento con id "modal-root", che può trovarsi fuori dalla radice principale dell'applicazione.