انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: العرض عبر البوابات createPortal وحدود عزل الأخطاء

Building Accessible Portal Modal بناء نافذة حوارية سليمة بالبوابة

تجاوز قيود القص والترتيب البصري للحاويات برسم النوافذ الحوارية عبر createPortal، وافهم صعود الأحداث عبر شجرة React، واعزل أعطال التصيير بأمان عبر Error Boundaries.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند بناء نافذة حوارية قياسية باستخدام createPortal()، اجمع بين النقل البصري ومعايير الوصول الشامل ودعم الثيمات: أضف سمات role="dialog" وaria-modal="true" وaria-labelledby، واربط زر الهروب Escape عبر تأثير useEffect() مع دالة تنظيف، واستخدم متغيرات الألوان الدلالية لدعم الوضعين الفاتح والداكن:

الصف 2 كود برمجي
HTML 
useEffect(() => {
  if (!open) return;
  const onKey = (e) => e.key === 'Escape' && onClose();
  window.addEventListener('keydown', onKey);
  return () => {
    window.removeEventListener('keydown', onKey);
  };
}, [open, onClose]);
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (العرض عبر البوابات createPortal وحدود عزل الأخطاء)