Tugann portal leanaí i ndomhan difriúil sa DOM (lasmuigh d'ordlathas DOM an tuismitheora), agus fós a bhíonn siad in crann na gcomponentí React — mar sin oibríonn comhthéacs, props, agus events ar an mbealach céanna is dá mba bhreac ghnáth a bheadh siad ann.
{ createPortal } ;
() {
(
,
.()
);
}
Caithfidh modals, tooltips, dropdowns, agus toasts éalú ó overflow: hidden nó z-index stacking context d'fhoras. Dá mba bhreac bhreac an modal i ndomhan domhain taobh istigh de chárta le overflow: hidden, bheadh sé gearrtha. Má dhéantar a dhó dhó go body trí portal, seachnaítear sin go hiomlán.
Is é seo an chuid dheasbhréithiúil, láidir: cé go bhfuil DOM an modal ina chónaí faoi body, fós a dhó onClick ar fhos React a thig, toisc go leanann buillí imeall an crann React, ní an crann DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Tugann portal réiteach ar phóisíniú, ní ar a11y. Do dhialóga caithfidh tú fós focus trapping, role="dialog"/aria-modal, agus Escape-to-close a bheith agat (nó úsáid a bhaint as an nádúrtha <dialog> eilimint a láimhseálann a lán de seo).
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús