Ένα portal αποδίδει τα θυγατρικά στοιχεία σε ένα διαφορετικό σημείο στο DOM (έξω από την ιεραρχία DOM του γονέα), ενώ τα διατηρεί στο δέντρο συστατικών React — επομένως το context, props και τα events λειτουργούν σαν να ήταν κανονικά ένθετα.
{ createPortal } ;
() {
(
,
.()
);
}
Ta modals, tooltips, dropdowns και toasts πρέπει να δραπετεύσουν από το overflow: hidden ή z-index πλαίσιο στοίβασης ενός προγόνου. Αν το modal ήταν ένθετο βαθιά μέσα σε μια κάρτα με overflow: hidden, θα περικόπτονταν. Η απόδοση στο body μέσω ενός portal αποφεύγει αυτό εντελώς.
Αυτό είναι το λεπτό, ισχυρό κομμάτι: παρόλο που το DOM του modal ζει κάτω από body, ένα onClick σε έναν React πρόγονο εξακολουθεί να ενεργοποιείται, επειδή η φυσαλίδα γεγονότων ακολουθεί το δέντρο React, όχι το δέντρο DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Ένα portal λύνει την τοποθέτηση, όχι a11y. Για τους διαλόγους χρειάζεστε ακόμα focus trapping, role="dialog"/aria-modal και Escape-to-close (ή χρησιμοποιήστε το εγγενές στοιχείο <dialog> που χειρίζεται πολλά από αυτά).