ஒரு 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> உறுப்பைப் பயன்படுத்தவும் இது பெரும்பாலான இதை கையாள்கிறது).