ما هي الـ Portals في ريأكت ومتى يجب استخدامها؟

الإجابة المختصرة

الـ Portals تتيح تصيير عنصر ابن في عقدة DOM تقع خارج التسلسل الهرمي للمكون الأب، مع الحفاظ على تصاعد الأحداث وسياق الـ Context كأنه عنصر ابن طبيعي.

الشرح

تستخدم createPortal(children, domNode) لنقل عناصر مثل النوافذ المنبثقة (Modals)، ومربعات الحوار (Dialogs)، والتلميحات (Tooltips) إلى نهاية body المتصفح لتفادي مشاكل الـ z-index والـ overflow: hidden الخاصة بالحاوية الأب، مع استمرار عمل Event Bubbling وفق شجرة مكونات ريأكت وليس شجرة الـ DOM.

مثال بالكود

import { createPortal } from 'react-dom';

function Modal({ children, isOpen }: { children: React.ReactNode; isOpen: boolean }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root') || document.body;
  return createPortal(
    <div className="modal-backdrop">
      <div className="modal-content">{children}</div>
    </div>,
    modalRoot
  );
}

أخطاء شائعة

• نسيان أن الـ Events الصادرة من داخل الـ Portal ستتصاعد (Bubble) عبر شجرة مكونات ريأكت إلى المكون الأب حتى لو كان الـ DOM منفصلاً تماماً.

أسئلة متابعة

• ما هو Virtual DOM في ريأكت وكيف يعمل خوارزمية الـ Reconciliation (Diffing)؟
• لماذا تعتبر الـ Keys مهمة جداً عند عرض القوائم وما مخاطر استخدام فهرس المصفوفة (Index) كـ Key؟

المصادر

• React docs — createPortal