React Academy · درس

ما هي React Portals؟

افهموا واجهة createPortal البرمجية ولماذا يفيد التصيير خارج div الجذر

ما هي React Portals؟ درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

ستتعلّم في هذا الدرس ماهية React Portals، وفائدة العرض خارج شجرة DOM الأب، وكيفية استخدام واجهة createPortal البرمجية.

التسلسل الهرمي المعتاد لـ React في DOM

افتراضيًا، يُعرَض كل مكوّن داخل عقدة DOM الخاصة بالمكوّن الأب. ويعيش تطبيق React بأكمله عادةً داخل `

` واحدة. يعمل هذا جيدًا إلى أن تحتاج إلى نافذة منبثقة أو تلميح أو قائمة منسدلة للخروج من أب يطبّق `overflow: hidden`.

ما المقصود بـ Portal؟

يتيح لك **Portal** عرض مخرجات مكوّن داخل عقدة DOM مختلفة — عقدة موجودة خارج جذر React. لا تتغير شجرة React الخاصة بالمكوّن؛ بل يتغير موضعه في DOM فقط.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

سبب وجود Portals

يمكن لخصائص CSS مثل `overflow: hidden` وسياقات التكديس الخاصة بـ `z-index` و`transform` على أحد الآباء أن تقتص العناصر الأبناء أو تخفيها. تتجاوز Portals هذه القيود عبر إرفاق المخرجات المعروضة بعقدة DOM مختلفة.

لا يزال تصاعد الأحداث يعمل

على الرغم من أن عقدة DOM الخاصة بـ Portal تقع خارج الأب، فإن **أحداث React لا تزال تتصاعد** عبر شجرة مكوّنات React — وليس شجرة DOM. فعند النقر داخل نافذة منبثقة في Portal، يتصاعد الحدث إلى الأب في React.

إنشاء هدف لـ Portal

يمكنك استخدام Portal داخل أي عقدة DOM موجودة. ومن الأنماط الشائعة إضافة `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

دورة حياة Portal مرتبطة بالأب في React

يُثبَّت Portal عند تثبيت المكوّن الأب، ويُزال عند إزالة الأب. ولا يزال React يتتبعه باعتباره جزءًا من شجرة المكوّنات نفسها، لذلك يعمل كل من Context والمراجع بشكل طبيعي.

يعمل Context عبر Portals

بما أن Portals تظل جزءًا من شجرة مكوّنات React، تبقى قيم Context المقدَّمة أعلى Portal متاحة داخله. ولا يؤثر موضعها في DOM على سلسلة Context في React.

استخدام createPortal مع الحالة

تحكّم في ظهور Portal باستخدام متغير حالة. بدّله باستخدام زر، وستظهر محتويات Portal داخل document.body، بينما يبقى الزر في موضعه المعتاد في DOM.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

العرض من جهة الخادم وPortals

تتطلب Portals وجود عقدة DOM، ولذلك تعمل دائمًا من جهة العميل. في Next.js أو إعدادات SSR الأخرى، احرص على تشغيل شيفرة عرض Portal في المتصفح فقط باستخدام `useEffect` أو التحقق من حالة التثبيت.

تحقق سريع

تعرض React Portals المحتوى داخل عقدة DOM مختلفة. ما الجانب من شجرة مكوّنات React الذي يتأثر بذلك؟

مراجعة

تتيح لك Portals عرض مخرجات React داخل أي عقدة DOM باستخدام createPortal(). ولا تتأثر شجرة React أو Context أو تصاعد الأحداث. استخدمها لتجاوز قيود overflow وz-index في النوافذ المنبثقة والتلميحات.

الدرس التالي: **بناء مكوّن Modal باستخدام Portals** — ستبني نافذة منبثقة قابلة لإعادة الاستخدام بالكامل، وتعرضها داخل document.body مع إدارة حالتي الفتح والإغلاق.

الأسئلة الشائعة

هل درس «ما هي React Portals؟» مجاني؟

نعم — نص درس «ما هي React Portals؟» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «ما هي React Portals؟»؟

افهموا واجهة createPortal البرمجية ولماذا يفيد التصيير خارج div الجذر تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «ما هي React Portals؟»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy