إتقان بوابات React: عرض المكونات خارج التسلسل الهرمي لـ DOM

في المشهد الواسع لتطوير الويب الحديث، مكّنت React عددًا لا يحصى من المطورين حول العالم من بناء واجهات مستخدم ديناميكية وتفاعلية للغاية. إن بنيتها القائمة على المكونات تبسط هياكل واجهة المستخدم المعقدة، مما يعزز إعادة الاستخدام وسهولة الصيانة. ومع ذلك، حتى مع تصميم React الأنيق، يواجه المطورون أحيانًا سيناريوهات يمثل فيها النهج القياسي لعرض المكونات – حيث تعرض المكونات مخرجاتها كأبناء داخل عنصر DOM الخاص بالآباء – قيودًا كبيرة.

لنأخذ مثالاً على مربع حوار منبثق يحتاج إلى الظهور فوق كل المحتويات الأخرى، أو لافتة إشعارات تطفو بشكل عام، أو قائمة سياق يجب أن تخرج من حدود حاوية الأب الفائضة. في هذه الحالات، يمكن أن يؤدي النهج التقليدي لعرض المكونات مباشرة داخل التسلسل الهرمي لـ DOM الخاص بالآباء إلى تحديات في التنسيق (مثل تعارضات z-index)، ومشكلات في التخطيط، وتعقيدات في انتشار الأحداث. هذا هو بالضبط المكان الذي تتدخل فيه بوابات React (React Portals) كأداة قوية لا غنى عنها في ترسانة مطوري React.

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

فهم التحدي الأساسي: قيود التسلسل الهرمي لـ DOM

بشكل افتراضي، تعرض مكونات React مخرجاتها في عقدة DOM الخاصة بالمكون الأب. وهذا يخلق علاقة مباشرة بين شجرة مكونات React وشجرة DOM في المتصفح. في حين أن هذه العلاقة بديهية ومفيدة بشكل عام، إلا أنها يمكن أن تصبح عائقًا عندما يحتاج التمثيل المرئي للمكون إلى التحرر من قيود أبيه.

السيناريوهات الشائعة ونقاط الألم فيها:

• النوافذ المنبثقة (Modals)، مربعات الحوار (Dialogs)، والصناديق المضيئة (Lightboxes): تحتاج هذه العناصر عادةً إلى تغطية التطبيق بأكمله، بغض النظر عن مكان تعريفها في شجرة المكونات. إذا كانت النافذة المنبثقة متداخلة بعمق، فقد يكون `z-index` الخاص بها في CSS مقيدًا بأسلافها، مما يجعل من الصعب ضمان ظهورها دائمًا في الأعلى. علاوة على ذلك، يمكن لخاصية `overflow: hidden` على عنصر أب أن تقص أجزاء من النافذة المنبثقة.
• التلميحات (Tooltips) والنوافذ المنبثقة الصغيرة (Popovers): على غرار النوافذ المنبثقة، غالبًا ما تحتاج التلميحات أو النوافذ المنبثقة الصغيرة إلى تحديد موقعها بالنسبة لعنصر ما ولكنها تظهر خارج حدوده الأبوية التي قد تكون ضيقة. يمكن لخاصية `overflow: hidden` على عنصر أب أن تقتطع جزءًا من التلميح.
• الإشعارات ورسائل Toast: غالبًا ما تظهر هذه الرسائل العامة في الجزء العلوي أو السفلي من إطار العرض، مما يتطلب عرضها بشكل مستقل عن المكون الذي أطلقها.
• قوائم السياق (Context Menus): تحتاج قوائم النقر بزر الماوس الأيمن أو قوائم السياق المخصصة إلى الظهور بدقة في المكان الذي ينقر فيه المستخدم، وغالبًا ما تخرج من حاويات الآباء الضيقة لضمان الرؤية الكاملة.
• التكامل مع مكتبات الطرف الثالث: في بعض الأحيان، قد تحتاج إلى عرض مكون React في عقدة DOM تتم إدارتها بواسطة مكتبة خارجية أو كود قديم، خارج جذر React.

في كل من هذه السيناريوهات، غالبًا ما تؤدي محاولة تحقيق النتيجة المرئية المرغوبة باستخدام عرض React القياسي فقط إلى CSS معقد، أو قيم `z-index` مفرطة، أو منطق تحديد مواقع معقد يصعب صيانته وتوسيع نطاقه. هنا تقدم بوابات React حلاً نظيفًا ومألوفًا.

ما هي بوابة React بالضبط؟

توفر بوابة React طريقة من الدرجة الأولى لعرض الأبناء في عقدة DOM موجودة خارج التسلسل الهرمي لـ DOM للمكون الأب. على الرغم من العرض في عنصر DOM مادي مختلف، فإن محتوى البوابة لا يزال يتصرف كما لو كان ابنًا مباشرًا في شجرة مكونات React. هذا يعني أنه يحافظ على نفس سياق React (على سبيل المثال، قيم Context API) ويشارك في نظام فقاعات الأحداث في React.

يكمن جوهر بوابات React في دالة `ReactDOM.createPortal()`. توقيعها بسيط:

ReactDOM.createPortal(child, container)

• child: أي ابن React قابل للعرض، مثل عنصر أو سلسلة نصية أو جزء (fragment).
• container: عنصر DOM موجود بالفعل في المستند. هذه هي عقدة DOM الهدف حيث سيتم عرض `child`.

عند استخدام `ReactDOM.createPortal()`، تنشئ React شجرة DOM افتراضية جديدة تحت عقدة DOM `container` المحددة. ومع ذلك، لا تزال هذه الشجرة الجديدة متصلة منطقيًا بالمكون الذي أنشأ البوابة. هذا "الاتصال المنطقي" هو مفتاح فهم سبب عمل فقاعات الأحداث والسياق كما هو متوقع.

إعداد أول بوابة React لك: مثال بسيط لنافذة منبثقة

دعنا نستعرض حالة استخدام شائعة: إنشاء مربع حوار منبثق. لتنفيذ بوابة، تحتاج أولاً إلى عنصر DOM هدف في ملف `index.html` (أو أينما كان ملف HTML الجذري لتطبيقك) حيث سيتم عرض محتوى البوابة.

الخطوة 1: تجهيز عقدة DOM الهدف

افتح ملف `public/index.html` (أو ما يعادله) وأضف عنصر `div` جديد. من الممارسات الشائعة إضافة هذا مباشرة قبل وسم `body` الختامي، خارج جذر تطبيق React الرئيسي.

<body>
  <!-- جذر تطبيق React الرئيسي -->
  <div id="root"></div>

  <!-- هنا سيتم عرض محتوى البوابة الخاصة بنا -->
  <div id="modal-root"></div>
</body>

الخطوة 2: إنشاء مكون البوابة

الآن، لنقم بإنشاء مكون نافذة منبثقة بسيط يستخدم بوابة.

// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // إلحاق عنصر div بالجذر المخصص للنافذة المنبثقة عند تحميل المكون
    modalRoot.appendChild(el.current);

    // تنظيف: إزالة عنصر div عند إلغاء تحميل المكون
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // مصفوفة الاعتماديات الفارغة تعني أن هذا يعمل مرة واحدة عند التحميل ومرة واحدة عند إلغاء التحميل

  if (!isOpen) {
    return null; // لا تعرض أي شيء إذا لم تكن النافذة المنبثقة مفتوحة
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // تأكد من أنها في الأعلى
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>إغلاق النافذة</button>
      </div>
    </div>,
    el.current // عرض محتوى النافذة المنبثقة داخل عنصر div الذي أنشأناه، والموجود داخل modalRoot
  );
};

export default Modal;

في هذا المثال، ننشئ عنصر `div` جديدًا لكل مثيل نافذة منبثقة (`el.current`) ونلحقه بـ `modal-root`. يتيح لنا هذا إدارة نوافذ منبثقة متعددة إذا لزم الأمر دون أن تتداخل مع دورة حياة بعضها البعض أو محتواها. ثم يتم عرض محتوى النافذة المنبثقة الفعلي (الطبقة العلوية والمربع الأبيض) في `el.current` هذا باستخدام `ReactDOM.createPortal`.

الخطوة 3: استخدام مكون النافذة المنبثقة

// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // بافتراض أن Modal.js في نفس الدليل

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>مثال على بوابة React</h1>
      <p>هذا المحتوى جزء من شجرة التطبيق الرئيسية.</p>
      <button onClick={handleOpenModal}>فتح نافذة منبثقة عامة</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>تحيات من البوابة!</h3>
        <p>يتم عرض محتوى هذه النافذة المنبثقة خارج div 'root'، ولكن لا يزال يتم إدارته بواسطة React.</p>
      </Modal>
    </div>
  );
}

export default App;

على الرغم من أن مكون `Modal` يتم عرضه داخل مكون `App` (والذي هو نفسه داخل `div` الجذر `root`)، إلا أن مخرجات DOM الفعلية الخاصة به تظهر داخل `div` `modal-root`. وهذا يضمن أن النافذة المنبثقة تغطي كل شيء دون مشاكل `z-index` أو `overflow`، مع الاستمرار في الاستفادة من إدارة الحالة ودورة حياة المكونات في React.

حالات الاستخدام الرئيسية والتطبيقات المتقدمة لبوابات React

في حين أن النوافذ المنبثقة هي مثال جوهري، فإن فائدة بوابات React تمتد إلى ما هو أبعد من مجرد النوافذ المنبثقة البسيطة. دعنا نستكشف سيناريوهات أكثر تقدمًا حيث توفر البوابات حلولاً أنيقة.

1. أنظمة النوافذ المنبثقة ومربعات الحوار القوية

كما رأينا، تبسط البوابات تنفيذ النوافذ المنبثقة. تشمل المزايا الرئيسية ما يلي:

• ضمان Z-Index: من خلال العرض على مستوى `body` (أو حاوية مخصصة عالية المستوى)، يمكن للنوافذ المنبثقة دائمًا تحقيق أعلى `z-index` دون صراع مع سياقات CSS المتداخلة بعمق. وهذا يضمن ظهورها باستمرار فوق جميع المحتويات الأخرى، بغض النظر عن المكون الذي أطلقها.
• الهروب من الفائض (Overflow): لن يقوم الآباء الذين لديهم `overflow: hidden` أو `overflow: auto` بقص محتوى النافذة المنبثقة بعد الآن. وهذا أمر بالغ الأهمية للنوافذ المنبثقة الكبيرة أو تلك التي تحتوي على محتوى ديناميكي.
• إمكانية الوصول (A11y): تعتبر البوابات أساسية لبناء نوافذ منبثقة يمكن الوصول إليها. على الرغم من أن بنية DOM منفصلة، إلا أن الاتصال المنطقي بشجرة React يسمح بإدارة التركيز بشكل صحيح (حصر التركيز داخل النافذة المنبثقة) وتطبيق سمات ARIA (مثل `aria-modal`) بشكل صحيح. تعتمد مكتبات مثل `react-focus-lock` أو `@reach/dialog` بشكل كبير على البوابات لهذا الغرض.

2. التلميحات الديناميكية، النوافذ المنبثقة الصغيرة، والقوائم المنسدلة

على غرار النوافذ المنبثقة، غالبًا ما تحتاج هذه العناصر إلى الظهور بجوار عنصر تشغيل ولكنها تخرج أيضًا من تخطيطات الآباء الضيقة.

• تحديد المواقع بدقة: يمكنك حساب موضع عنصر التشغيل بالنسبة إلى إطار العرض ثم تحديد موضع التلميح بشكل مطلق باستخدام JavaScript. يضمن عرضه عبر بوابة أنه لن يتم قصه بواسطة خاصية `overflow` على أي أب وسيط.
• تجنب تحولات التخطيط: إذا تم عرض تلميح مضمن، فقد يتسبب وجوده في تحولات في تخطيط أبيه. تعزل البوابات عرضه، مما يمنع عمليات إعادة التدفق غير المقصودة.

3. الإشعارات العالمية ورسائل Toast

غالبًا ما تتطلب التطبيقات نظامًا لعرض رسائل مؤقتة وغير معرقلة (مثل "تمت إضافة العنصر إلى السلة!"، "فُقد الاتصال بالشبكة").

• الإدارة المركزية: يمكن لمكون "ToastProvider" واحد إدارة قائمة انتظار لرسائل toast. يمكن لهذا الموفر استخدام بوابة لعرض جميع الرسائل في `div` مخصص في الجزء العلوي أو السفلي من `body`، مما يضمن أنها مرئية دائمًا ومنسقة باستمرار، بغض النظر عن مكان إطلاق الرسالة في التطبيق.
• الاتساق: يضمن أن جميع الإشعارات عبر تطبيق معقد تبدو وتتصرف بشكل موحد.

4. قوائم السياق المخصصة

عندما ينقر المستخدم بزر الماوس الأيمن على عنصر ما، تظهر غالبًا قائمة سياق. يجب وضع هذه القائمة بدقة في موقع المؤشر وتغطية جميع المحتويات الأخرى. البوابات مثالية هنا:

• يمكن عرض مكون القائمة عبر بوابة، مع تلقي إحداثيات النقر.
• ستظهر بالضبط حيث تكون هناك حاجة إليها، غير مقيدة بالتسلسل الهرمي لأب العنصر الذي تم النقر عليه.

5. التكامل مع مكتبات الطرف الثالث أو عناصر DOM غير التابعة لـ React

تخيل أن لديك تطبيقًا موجودًا حيث يتم إدارة جزء من واجهة المستخدم بواسطة مكتبة JavaScript قديمة، أو ربما حل خرائط مخصص يستخدم عقد DOM الخاصة به. إذا كنت ترغب في عرض مكون React صغير وتفاعلي داخل عقدة DOM خارجية كهذه، فإن `ReactDOM.createPortal` هو جسرك.

• يمكنك إنشاء عقدة DOM هدف داخل المنطقة التي يسيطر عليها الطرف الثالث.
• بعد ذلك، استخدم مكون React مع بوابة لحقن واجهة مستخدم React الخاصة بك في عقدة DOM المحددة تلك، مما يسمح لقوة React التصريحية بتعزيز الأجزاء غير التابعة لـ React من تطبيقك.

اعتبارات متقدمة عند استخدام بوابات React

بينما تحل البوابات مشاكل العرض المعقدة، من الضروري فهم كيفية تفاعلها مع ميزات React الأخرى و DOM للاستفادة منها بفعالية وتجنب المزالق الشائعة.

1. فقاعات الأحداث: تمييز حاسم

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

• ماذا يعني ذلك: إذا كان لديك زر داخل بوابة، وتصاعد حدث النقر الخاص بهذا الزر، فسيقوم بتشغيل أي معالجات `onClick` على مكوناته الأبوية المنطقية في شجرة React، وليس أبيه في DOM.
• مثال: إذا تم عرض مكون `Modal` الخاص بك بواسطة `App`، فإن نقرة داخل `Modal` ستتصاعد إلى معالجات أحداث `App` إذا تم تكوينها. هذا مفيد للغاية لأنه يحافظ على تدفق الأحداث البديهي الذي تتوقعه في React.
• أحداث DOM الأصلية: إذا قمت بإرفاق مستمعي أحداث DOM أصليين مباشرة (على سبيل المثال، باستخدام `addEventListener` على `document.body`)، فسوف يتبعون شجرة DOM الأصلية. ومع ذلك، بالنسبة لأحداث React الاصطناعية القياسية (`onClick`، `onChange`، إلخ)، تسود شجرة React المنطقية.

2. Context API والبوابات

Context API هي آلية React لمشاركة القيم (مثل السمات، حالة مصادقة المستخدم) عبر شجرة المكونات دون الحاجة إلى تمرير الخصائص (prop-drilling). لحسن الحظ، يعمل السياق بسلاسة مع البوابات.

• سيظل المكون المعروض عبر بوابة قادرًا على الوصول إلى موفري السياق الذين هم أسلاف في شجرته المنطقية لمكونات React.
• هذا يعني أنه يمكنك الحصول على `ThemeProvider` في الجزء العلوي من مكون `App` الخاص بك، وستظل النافذة المنبثقة المعروضة عبر بوابة ترث سياق السمة هذا، مما يبسط التنسيق العالمي وإدارة الحالة لمحتوى البوابة.

3. إمكانية الوصول (A11y) مع البوابات

بناء واجهات مستخدم يمكن الوصول إليها أمر بالغ الأهمية للجماهير العالمية، وتقدم البوابات اعتبارات محددة لإمكانية الوصول، خاصة بالنسبة للنوافذ المنبثقة ومربعات الحوار.

• إدارة التركيز: عند فتح نافذة منبثقة، يجب حصر التركيز داخلها لمنع المستخدمين (خاصة مستخدمي لوحة المفاتيح وقارئات الشاشة) من التفاعل مع العناصر الموجودة خلفها. عند إغلاق النافذة المنبثقة، يجب أن يعود التركيز إلى العنصر الذي أطلقها. يتطلب هذا غالبًا إدارة دقيقة بـ JavaScript (على سبيل المثال، استخدام `useRef` لإدارة العناصر القابلة للتركيز، أو مكتبة مخصصة مثل `react-focus-lock`).
• التنقل بلوحة المفاتيح: تأكد من أن مفتاح `Esc` يغلق النافذة المنبثقة وأن مفتاح `Tab` يتنقل بالتركيز داخل النافذة المنبثقة فقط.
• سمات ARIA: استخدم أدوار وخصائص ARIA بشكل صحيح، مثل `role="dialog"`، `aria-modal="true"`، `aria-labelledby`، و `aria-describedby` على محتوى البوابة لتوصيل غرضها وهيكلها للتقنيات المساعدة.

4. تحديات التنسيق والحلول

بينما تحل البوابات مشكلات التسلسل الهرمي لـ DOM، فإنها لا تحل بطريقة سحرية جميع تعقيدات التنسيق.

• الأنماط العامة مقابل الأنماط المحددة النطاق: نظرًا لأن محتوى البوابة يتم عرضه في عقدة DOM يمكن الوصول إليها عالميًا (مثل `body` أو `modal-root`)، يمكن لأي قواعد CSS عامة أن تؤثر عليه.
• CSS-in-JS ووحدات CSS: يمكن أن تساعد هذه الحلول في تغليف الأنماط ومنع التسريبات غير المقصودة، مما يجعلها مفيدة بشكل خاص عند تنسيق محتوى البوابة. يمكن لـ Styled Components أو Emotion أو CSS Modules إنشاء أسماء فئات فريدة، مما يضمن عدم تعارض أنماط النافذة المنبثقة مع أجزاء أخرى من تطبيقك، على الرغم من عرضها عالميًا.
• التخصيص (Theming): كما ذكرنا مع Context API، تأكد من أن حل التخصيص الخاص بك (سواء كان متغيرات CSS أو سمات CSS-in-JS أو التخصيص المستند إلى السياق) ينتشر بشكل صحيح إلى أبناء البوابة.

5. اعتبارات العرض من جانب الخادم (SSR)

إذا كان تطبيقك يستخدم العرض من جانب الخادم (SSR)، فيجب أن تكون على دراية بكيفية تصرف البوابات.

• يتطلب `ReactDOM.createPortal` عنصر DOM كوسيط `container`. في بيئة SSR، يحدث العرض الأولي على الخادم حيث لا يوجد متصفح DOM.
• هذا يعني أن البوابات لن يتم عرضها عادةً على الخادم. سيتم "ترطيبها" أو عرضها فقط بمجرد تنفيذ JavaScript من جانب العميل.
• بالنسبة للمحتوى الذي يجب أن يكون موجودًا *بالتأكيد* في العرض الأولي للخادم (على سبيل المثال، لتحسين محركات البحث أو أداء الرسم الأول الحرج)، فإن البوابات غير مناسبة. ومع ذلك، بالنسبة للعناصر التفاعلية مثل النوافذ المنبثقة، والتي عادة ما تكون مخفية حتى يتم تشغيلها بإجراء ما، نادرًا ما تكون هذه مشكلة. تأكد من أن مكوناتك تتعامل برشاقة مع عدم وجود `container` البوابة على الخادم عن طريق التحقق من وجوده (على سبيل المثال، `document.getElementById('modal-root')`).

6. اختبار المكونات التي تستخدم البوابات

يمكن أن يكون اختبار المكونات التي يتم عرضها عبر بوابات مختلفًا قليلاً ولكنه مدعوم جيدًا من قبل مكتبات الاختبار الشائعة مثل React Testing Library.

• React Testing Library: تستعلم هذه المكتبة عن `document.body` بشكل افتراضي، وهو المكان الذي من المحتمل أن يكون فيه محتوى البوابة. لذا، فإن الاستعلام عن العناصر داخل النافذة المنبثقة أو التلميح غالبًا ما "يعمل ببساطة".
• المحاكاة (Mocking): في بعض السيناريوهات المعقدة، أو إذا كان منطق البوابة مرتبطًا بإحكام بهياكل DOM محددة، فقد تحتاج إلى محاكاة أو إعداد عنصر `container` الهدف بعناية في بيئة الاختبار الخاصة بك.

المزالق الشائعة وأفضل الممارسات لبوابات React

لضمان أن استخدامك لبوابات React فعال وقابل للصيانة ويعمل بشكل جيد، ضع في اعتبارك هذه أفضل الممارسات وتجنب الأخطاء الشائعة:

1. لا تفرط في استخدام البوابات

البوابات قوية، ولكن يجب استخدامها بحكمة. إذا كان يمكن تحقيق المخرجات المرئية للمكون دون كسر التسلسل الهرمي لـ DOM (على سبيل المثال، باستخدام تحديد المواقع النسبي أو المطلق داخل أب غير فائض)، فافعل ذلك. يمكن أن يؤدي الاعتماد المفرط على البوابات في بعض الأحيان إلى تعقيد تصحيح أخطاء بنية DOM إذا لم تتم إدارتها بعناية.

2. تأكد من التنظيف المناسب (إلغاء التحميل)

إذا قمت بإنشاء عقدة DOM ديناميكيًا لبوابتك (كما في مثال `Modal` الخاص بنا مع `el.current`)، فتأكد من تنظيفها عند إلغاء تحميل المكون الذي يستخدم البوابة. تعد دالة التنظيف في `useEffect` مثالية لهذا الغرض، حيث تمنع تسرب الذاكرة وتكدس DOM بعناصر يتيمة.

useEffect(() => {
  // ... إلحاق el.current
  return () => {
    // ... إزالة el.current;
  };
}, []);

إذا كنت تعرض دائمًا في عقدة DOM ثابتة وموجودة مسبقًا (مثل `modal-root` واحد)، فإن تنظيف *العقدة نفسها* ليس ضروريًا، ولكن ضمان إلغاء تحميل *محتوى البوابة* بشكل صحيح عند إلغاء تحميل المكون الأب لا يزال يتم التعامل معه تلقائيًا بواسطة React.

3. اعتبارات الأداء

بالنسبة لمعظم حالات الاستخدام (النوافذ المنبثقة، التلميحات)، يكون للبوابات تأثير ضئيل على الأداء. ومع ذلك، إذا كنت تعرض مكونًا كبيرًا جدًا أو يتم تحديثه بشكل متكرر عبر بوابة، ففكر في تحسينات الأداء المعتادة في React (على سبيل المثال، `React.memo`، `useCallback`، `useMemo`) كما تفعل مع أي مكون معقد آخر.

4. أعطِ الأولوية دائمًا لإمكانية الوصول

كما تم تسليط الضوء عليه، فإن إمكانية الوصول أمر بالغ الأهمية. تأكد من أن المحتوى المعروض عبر البوابة يتبع إرشادات ARIA ويوفر تجربة سلسة لجميع المستخدمين، خاصة أولئك الذين يعتمدون على التنقل بلوحة المفاتيح أو قارئات الشاشة.

• حصر تركيز النافذة المنبثقة: قم بتنفيذ أو استخدام مكتبة تحصر تركيز لوحة المفاتيح داخل النافذة المنبثقة المفتوحة.
• سمات ARIA الوصفية: استخدم `aria-labelledby` و `aria-describedby` لربط محتوى النافذة المنبثقة بعنوانها ووصفها.
• الإغلاق بلوحة المفاتيح: اسمح بالإغلاق باستخدام مفتاح `Esc`.
• استعادة التركيز: عند إغلاق النافذة المنبثقة، أعد التركيز إلى العنصر الذي فتحها.

5. استخدم HTML الدلالي داخل البوابات

بينما تسمح لك البوابة بعرض المحتوى في أي مكان بصريًا، تذكر استخدام عناصر HTML الدلالية داخل أبناء البوابة. على سبيل المثال، يجب أن يستخدم مربع الحوار عنصر `

// مثال على مكوّن PortalWrapper بسيط
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // إذا لم يكن العنصر موجودًا بمعرف wrapperId، قم بإنشائه وإلحاقه بالجسم
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // حذف العنصر الذي تم إنشاؤه برمجيًا
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;