portal يرندر العناصر الفرعية في مكان مختلف في DOM (خارج تسلسل DOM الأب)، مع الحفاظ عليها في شجرة مكونات React — لذا السياق والخصائص والأحداث تعمل كما لو كانت متداخلة بشكل طبيعي.
jsx
{ createPortal } ;
() {
(
,
.()
);
}
portal يرندر العناصر الفرعية في مكان مختلف في DOM (خارج تسلسل DOM الأب)، مع الحفاظ عليها في شجرة مكونات React — لذا السياق والخصائص والأحداث تعمل كما لو كانت متداخلة بشكل طبيعي.
{ createPortal } ;
() {
(
,
.()
);
}
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرعالنوافذ المنبثقة والتلميحات والقوائم المنسدلة والإشعارات يجب أن تتجاوز overflow: hidden أو سياق تراص z-index الخاص بالأب. إذا كانت النافذة المنبثقة متداخلة بعمق داخل بطاقة بها overflow: hidden، فسيتم قطعها. عرضها على body عبر portal يتجنب هذا تماماً.
هذا هو الجزء الدقيق والقوي: على الرغم من أن DOM للنافذة المنبثقة يعيش تحت body، إلا أن onClick على أب React يظل ينطلق، لأن فقاعة الأحداث تتبع شجرة React، وليس شجرة DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
يحل portal مشكلة التوضع، وليس a11y. بالنسبة للحوارات، تحتاج إلى احتواء التركيز وrole="dialog"/aria-modal وإغلاق عند الضغط على Escape (أو استخدم عنصر <dialog> الأصلي الذي يتعامل مع الكثير من هذا).