Portalas atvaizduoja vaikus kitoje DOM vietoje (už tėvinio DOM hierarchijos), bet juos išlaiko React komponentų medyje — todėl kontekstas, props ir įvykiai vis tiek veikia tarsi jie būtų įprastai įdėti.
{ createPortal } ;
() {
(
,
.()
);
}
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
PaaukotiModalai, patarimų langeliai, išplečiamieji sąrašai ir pranešimai turi išeiti iš pirmtėko overflow: hidden arba z-index sluoksniavimo konteksto. Jei modalas būtų giliai įdėtas kortelės viduje su overflow: hidden, jis būtų nupjautas. Jį atvaizduojant į body per portalą, to visiškai išvengiama.
Tai subtili, galingi dalis: nors modalo DOM gyvena po body, React pirmtėko onClick vis tiek paleidžiamas, nes įvykių burbuliavimas seka React medį, ne DOM medį:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portalas išsprendžia pozicionavimą, bet ne a11y. Dialogo langams vis tiek reikalingas fokusojavimo spindulys, role="dialog"/aria-modal ir Escape-norint-uždaryti (arba naudokite natyvų <dialog> elementą, kuris daug to valdina automatiškai).