I componenti di React incoraggiano le buone pratiche ma possono essere troppo restrittivi. Impara come rompere gli schemi.

Punti chiave

  • I portali React ti consentono di eseguire il rendering del contenuto di un componente al di fuori della gerarchia del componente principale, rendendolo utile per elementi dell'interfaccia utente come modali e sovrapposizioni.
  • I portali possono essere utilizzati in vari scenari come modali, integrazioni di terze parti, menu contestuali e descrizioni comandi, consentendo un rendering flessibile in diverse posizioni DOM.
  • Utilizzando i portali React, puoi separare i problemi dell'interfaccia utente dall'albero dei componenti principale, migliorare la manutenibilità del codice e controllare facilmente lo z-index dei componenti per la stratificazione e l'impilamento degli elementi dell'interfaccia utente.

Le moderne applicazioni web necessitano di interfacce che presentino elementi come modali e tooltip. Ma questi componenti dell'interfaccia utente potrebbero non integrarsi sempre bene con la struttura dei componenti esistente.

instagram viewer

React offre una soluzione a questo problema attraverso una funzionalità chiamata Portali.

Cosa sono i portali React?

I portali React forniscono un modo per eseguire il rendering del contenuto di un componente al di fuori della gerarchia del componente principale. In altre parole, ti consentono di eseguire il rendering dell'output di un componente in un elemento DOM diverso che non è figlio del componente corrente.

Questa funzionalità è utile quando si ha a che fare con componenti dell'interfaccia utente che devono essere visualizzati a un livello superiore nel DOM, come modali o overlay.

Usi per i portali React

I portali React sono utili in vari scenari:

  • Modali e sovrapposizioni. Quando è necessario visualizzare dialoghi modali o sovrapposizioni, renderli al livello più alto del DOM. Ciò garantisce che gli stili o il layout del genitore non li limitino.
  • Integrazioni di terze parti. Quando si integrano librerie di terze parti che anticipano il rendering in posizioni DOM specifiche.
  • Menu contestuali. Creazione di menu contestuali che rispondono alle interazioni dell'utente, che è necessario posizionare rispetto al viewport o a uno specifico elemento DOM.
  • Tooltip e popover. Durante il rendering di descrizioni comandi o popover che devono essere visualizzati sopra altri componenti, indipendentemente dalla loro posizione nell'albero dei componenti.

Come funzionano i portali React

Tradizionalmente, quando esegui il rendering di un componente in React, colleghi il suo output al nodo DOM del componente principale. Funziona bene per la maggior parte degli scenari, ma diventa limitante quando è necessario eseguire il rendering del contenuto all'esterno della gerarchia padre.

Supponiamo che tu stia creando un dialogo modale. Per impostazione predefinita, inserirai il contenuto della modale all'interno del file nodo DOM del componente principale.

Ciò può portare a conflitti di stile e ad altri comportamenti non desiderati poiché il contenuto della modale eredita gli stili e i vincoli dei suoi componenti principali.

I portali React risolvono questa limitazione consentendo di specificare un elemento DOM di destinazione in cui deve essere visualizzato l'output di un componente.

Ciò significa che puoi eseguire il rendering di qualsiasi elemento dell'interfaccia utente al di fuori della gerarchia DOM del genitore, liberandoti dai vincoli degli stili e del layout del genitore.

Come utilizzare i portali React

I modali sono un esempio perfetto di quando potresti utilizzare i portali React. Questo codice di esempio spiega la procedura.

Configura un'applicazione React di base

Prima di creare un portale, assicurati di avere un'applicazione React configurata di base. Puoi usare strumenti come Crea app React per impalcare rapidamente un progetto.

Creare un portale per Modals

Per creare un portale, utilizzare il file ReactDOM.createPortal() funzione. Sono necessari due argomenti: il contenuto che desideri visualizzare e un riferimento al nodo DOM in cui visualizzarlo.

In questo esempio, il componente Modale esegue il rendering dei suoi figli utilizzando un portale. Il contenuto apparirà nell'elemento DOM con l'ID "root".

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

È possibile definire il contenuto di un Modal specifico in un componente specifico. Ad esempio, questo componente ModalContent contiene un paragrafo e un Vicino pulsante:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

È quindi possibile aprire Modal tramite un clic sul pulsante definito in App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

In questo esempio, il componente Modale esegue il rendering del proprio contenuto utilizzando un portale, separato dalla gerarchia del componente principale.

Esempi del mondo reale

I portali React sono utili in varie situazioni quotidiane.

  • Sistema di notifica: Quando creazione di un sistema di notifica, spesso desideri che i messaggi vengano visualizzati nella parte superiore dello schermo, indipendentemente da dove si trova il componente corrente.
  • Menu contestuale: i menu contestuali dovrebbero apparire vicino al punto in cui l'utente fa clic, indipendentemente da dove si trova nella gerarchia DOM.
  • Integrazione di terze parti: le librerie di terze parti spesso devono prendere di mira parti arbitrarie del DOM.

Migliori pratiche per l'utilizzo del portale

Per ottenere il massimo dai portali React, segui questi suggerimenti:

  • Seleziona i casi giusti: i portali sono flessibili, ma non tutto ne ha bisogno. Utilizza i portali quando il rendering regolare causa problemi o conflitti.
  • Mantieni separato il contenuto del portale: quando esegui il rendering del contenuto tramite i portali, assicurati che sia autonomo. Non dovrebbe fare affidamento sugli stili o sul contesto dei genitori.
  • Gestisci eventi e azioni: con i portali, gli eventi funzionano in modo leggermente diverso a causa del contenuto separato. Gestire correttamente la propagazione e le azioni degli eventi.

Vantaggi dei portali React

I portali React offrono numerosi vantaggi che possono migliorare lo sviluppo di interfacce utente complesse. Essi:

  • Aiuta a separare i problemi dell'interfaccia utente dall'albero dei componenti principali, migliorando la manutenibilità e la leggibilità del codice.
  • Fornire flessibilità per i componenti che devono essere visualizzati al di fuori del componente principale.
  • Semplifica la creazione di modali e sovrapposizioni separati dal resto dell'interfaccia utente.
  • Ti consente di controllare facilmente lo z-index dei componenti, assicurandoti di poter sovrapporre e impilare ordinatamente gli elementi dell'interfaccia utente.

Potenziali insidie ​​e considerazioni

Sebbene i portali React siano utili, tieni a mente queste cose:

  • Problemi CSS: i portali possono causare comportamenti imprevisti dello stile CSS poiché inseriscono il contenuto all'esterno dei componenti principali. Utilizza stili globali o gestisci attentamente l'ambito CSS.
  • Accessibilità: quando utilizzi i portali per eseguire il rendering dei contenuti, ricorda di mantenere intatte le funzionalità di accessibilità come la navigazione tramite tastiera e la compatibilità con lo screen reader.
  • Rendering lato server: i portali potrebbero non adattarsi bene rendering lato server (SSR). Comprendere gli effetti e i limiti dell'utilizzo dei portali nelle configurazioni SSR.

Spingere l'interfaccia utente oltre la norma

I portali React offrono una soluzione efficace per gestire situazioni complesse dell'interfaccia utente che richiedono che il contenuto venga visualizzato oltre i limiti dei componenti principali.

Utilizzando i portali e utilizzando le best practice, è possibile creare interfacce utente più adattabili e più facili da mantenere, il tutto evitando problemi.

Che tu stia creando modali o importando librerie di terze parti, i portali React forniscono una risposta potente per soddisfare le impegnative esigenze dell'interfaccia utente.