ఒక portal పిల్లలను DOM లో వేరు చేసిన ప్రదేశానికి (తల్లిదండ్రుల DOM క్రమానికి బయట) అందిస్తుంది, అయితే వాటిని React యొక్క సంఘటక చెట్టులో ఉంచుతుంది — కాబట్టి సందర్భం, props మరియు ఈవెంట్లు సాధారణంగా నెస్ట్ చేయబడినట్లు ఇప్పటికీ పనిచేస్తాయి.
{ createPortal } ;
() {
(
,
.()
);
}
మోడల్లు, టూల్టిప్లు, డ్రాప్డౌన్లు మరియు టోస్ట్లు ఒక పూర్వీకుల overflow: hidden లేదా z-index స్టేకింగ్ సందర్భాన్ని తప్పుకోవాలి. మోడల్ overflow: hidden ఉన్న కార్డులో లోతుగా నెస్ట్ చేయబడినట్లయితే, అది కత్తిరించబడుతుంది. Portal ద్వారా దానిని body కు అందించడం దానిని పూర్తిగా నివారిస్తుంది.
ఇది సూక్ష్మమైన, శక్తిశాలీ భాగం: మోడల్ యొక్క DOM body కిందకు నివసిస్తున్నప్పటికీ, React పూర్వీకుడిపై onClick ఇప్పటికీ కాలుస్తుంది, ఎందుకంటే ఈవెంట్ బబుల్ React చెట్టుని అనుసరిస్తుంది, DOM చెట్టు కాదు:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal స్థానం పరిష్కరిస్తుంది, a11y కాదు. డైలాగ్ల కోసం మీకు ఇప్పటికీ ఫోకస్ ట్రాపింగ్, role="dialog"/aria-modal మరియు Escape-to-close అవసరం (లేదా నేటివ్ <dialog> మూలకను ఉపయోగించండి ఇది చాలా వరకు నిర్వహిస్తుంది).