პორტალი აკეთებს children-ის რენდერირებას DOM-ის სხვა ადგილას (მშობელი DOM იერარქიის გარეთ), მაგრამ React-ის component tree-ში ისინი რჩებიან — ამიტომ context, props და events ისევე მუშაობს, როგორც ნორმალურად ჩასმული ელემენტები.
{ createPortal } ;
() {
(
,
.()
);
}
Modalები, tooltipები, dropdownები და toastები უნდა გაქცეს წინაპერი overflow: hidden ან z-index stacking context-დან. თუ modal იყო ღრმად ჩასმული card-ის შიგნით, რომელსაც აქვს overflow: hidden, ის დაიჭრებოდა. მისი რენდერირება body-ში პორტალის მეშვეობით სრულად თავს იჩენს ამ პრობლემას.
ეს არის დახვეწილი, ძლევამოსილი ნაწილი: მიუხედავად იმისა, რომ modal-ის DOM ცხოვრობს body-ის ქვეშ, onClick React წინაპერზე მაინც ჩაიფიქრება, რადგან event bubbling მიჰყვება React tree-ს, არა DOM tree-ს:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
პორტალი წყვეტს positioning-ს, არა a11y-ს. dialogs-ისთვის თქვენ კვლავ გჭირდებათ focus trapping, role="dialog"/aria-modal და Escape-to-close (ან გამოიყენეთ native <dialog> element, რომელიც ამ უმეტესობას ამუშავებს).