0Pricing
React Academy · Lezione

Cosa sono i React Portal?

Comprendere l'API createPortal e l'utilità del rendering al di fuori del div root.

Cosa sono i React Portal? è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà cosa sono i Portali React, perché è utile eseguire il rendering al di fuori dell'albero DOM padre e come utilizzare l'API createPortal.

La gerarchia DOM normale di React

Per impostazione predefinita, ogni componente esegue il rendering all'interno del nodo DOM del componente padre. L'intera app React si trova generalmente all'interno di un unico `
`. Questo funziona bene finché non ha bisogno che un modale, un tooltip o un menu a discesa esca da un genitore con `overflow: hidden`.

Che cos'è un Portale?

Un **Portale** consente di eseguire il rendering dell'output di un componente in un nodo DOM diverso, che si trova al di fuori della radice React. L'albero React del componente rimane invariato; cambia solo la posizione nel DOM.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Perché esistono i Portali

Proprietà CSS come `overflow: hidden`, i contesti di impilamento di `z-index` e `transform` applicato a un genitore possono ritagliare o nascondere gli elementi figli. I Portali aggirano questi vincoli collegando l'output renderizzato a un nodo DOM diverso.

La propagazione degli eventi continua a funzionare

Anche se il nodo DOM del Portale si trova al di fuori del genitore, **gli eventi React continuano a propagarsi** attraverso l'albero dei componenti React, non attraverso l'albero DOM. Un clic all'interno di un modale del Portale risalirà fino al relativo genitore React.

Creazione della destinazione di un Portale

Può utilizzare qualsiasi nodo DOM esistente come destinazione del Portale. Un modello comune consiste nell'aggiungere un `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Il ciclo di vita del Portale è legato al genitore React

Un Portale viene montato quando viene montato il componente genitore e smontato quando il genitore viene smontato. React continua a considerarlo parte dello stesso albero dei componenti, quindi contesto e ref funzionano normalmente.

Il contesto funziona attraverso i Portali

Poiché i Portali rimangono parte dell'albero dei componenti React, i valori del contesto forniti sopra il Portale sono ancora accessibili al suo interno. La posizione nel DOM non influisce sulla catena del contesto React.

Utilizzo di createPortal con lo stato

Controlli la visibilità del Portale con una variabile di stato. La attivi o disattivi con un pulsante e il contenuto del Portale apparirà in document.body, mentre il pulsante resterà nella sua normale posizione nel DOM.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Rendering lato server e Portali

I Portali richiedono l'esistenza di un nodo DOM, quindi vengono sempre eseguiti lato client. In Next.js o in altre configurazioni SSR, si assicuri che il codice di rendering del Portale venga eseguito solo nel browser, utilizzando `useEffect` o un controllo dello stato di montaggio.

Verifica rapida

I Portali React eseguono il rendering del contenuto in un nodo DOM diverso. Quale aspetto dell'albero dei componenti React viene influenzato da questo?

Riepilogo

I Portali consentono di eseguire il rendering dell'output React in qualsiasi nodo DOM utilizzando createPortal(). L'albero React, il contesto e la propagazione degli eventi non vengono modificati. Li utilizzi per aggirare i vincoli di overflow e z-index nei modali e nei tooltip.

Prossimo argomento

Prossima lezione: **Creazione di un componente modale con i Portali**: creerà un modale completamente riutilizzabile che esegue il rendering tramite Portale in document.body, con gestione dello stato di apertura e chiusura.

Domande Frequenti

La lezione «Cosa sono i React Portal?» è gratuita?

Sì — il testo completo di «Cosa sono i React Portal?» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Cosa sono i React Portal?»?

Comprendere l'API createPortal e l'utilità del rendering al di fuori del div root. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Cosa sono i React Portal?»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Cosa sono i React Portal?
  2. Creazione di un componente modale con i Portal
  3. Gestione del focus e dei blocchi da tastiera nelle modali
  4. Tooltip e menu a discesa con i Portal
← Torna a React Academy