في هذا الدرس 6تصفّح المواضيع
تتكيف واجهات التطبيقات الحقيقية باستمرار مع حالة البيانات وصلاحيات المستخدم؛ فتعرض زر تسجيل الدخول للزائر أو بطاقة الملف الشخصي للعضو المسجل، وتُظهر شارة الإنجاز عند اكتمال الدروس فقط. في مكتبة React، لا توجد أوامر قوالب غريبة؛ بل يعتمد العرض الشرطي (Conditional Rendering) كلياً على أدوات الشرط القياسية في JavaScript.
عندما يتغير مخرج المكون بالكامل بناءً على شرط أولي، مثل درس مقفل أو عدم توفر سجل المستخدم بعد، اكتب جملة إرجاع مبكر (Early Return) باستخدام if في بداية دالة المكون قبل جملة الإرجاع الرئيسية؛ مما يحافظ على نظافة شجرة JSX الأساسية دون تداخل معقد.
function LessonAccessCard({ title, isUnlocked }) {
if (!isUnlocked) {
return <p className="rx-card">Locked: {title}</p>;
}
return (
<div className="rx-card">
<h3>{title} — Ready</h3>
</div>
);
}بما أن الأقواس المعقوفة {} داخل JSX لا تقبل سوى التعابير البرمجية المنتجة لقيمة ولا تقبل جملة if المباشرة، نستخدم المعامل الشرطي الثلاثي (condition ? exprA : exprB) للتبديل الأنيق بين نصين أو كلاسين أو مكونين فرعيين في قلب شجرة العرض.
function ServerRow({ region, isHealthy }) {
return (
<div className="rx-card">
<strong>{region}: </strong>
<span>{isHealthy ? 'Online' : 'Offline'}</span>
</div>
);
}كثيراً ما تحتاج إلى إظهار شارة أو ملاحظة اختيارية عند تحقق شرط معين، وعدم رسم أي عنصر عند عدم تحققه. هنا يبرز تعبير المعامل المنطقي المختصر {isVerified && <VerifiedBadge />}؛ فعندما يكون الطرف الأيسر true يُعيد التعبير عنصر JSX الأيمن، وعندما يكون false تتجاهل React القيمة المنطقية ولا تضيف أي عقدة في المتصفح.
تنبيه هندسي بالغ الأهمية: لا تضع رقماً خاماً على يسار المعامل && مباشرة! فإذا كانت قيمة unreadCount تساوي 0، فإن التعبير 0 && <Badge /> يعيد الرقم 0، وبما أن الصفر رقم قابل للعرض كأي رقم آخر، تطبعه React كحرف 0 مشوِّه على الشاشة.
احرص دائماً على تحويل الشرط الرقمي إلى مقارنة منطقية صريحة مثل unreadCount > 0 && <Badge />.
function InboxHeader({ count }) {
return (
<div className="rx-card">
<h3>Notifications</h3>
{count > 0 && (
<span className="rx-badge">{count} New</span>
)}
</div>
);
}عندما تريد إخفاء المكون بأكمله بحيث لا يترك حتى وسم حاوية فارغاً في الصفحة، أرجع القيمة null مباشرة من الدالة مثل if (!showBanner) return null;. كما يمكنك إسناد عنصر العرض الشرطي إلى متغير محلي مقروء قبل جملة الإرجاع عندما تتعدد الحالات. يلخص الجدول التالي متى تستخدم كل أسلوب:
| أسلوب العرض الشرطي | نمط الصياغة البرمجية | متى تختاره هندسياً |
|---|---|---|
| الإرجاع المبكر بجملة if | if (!ready) return <Fallback />; | تبديل مخرج المكون بالكامل بوضوح في أول الدالة |
| المعامل الثلاثي المضمن | {isPro ? <Pro /> : <Free />} | المفاضلة المباشرة بين عنصرين داخل شجرة JSX |
| المعامل المنطقي الآمن | {items.length > 0 && <Badge />} | إظهار عنصر اختياري عند تحقق الشرط فقط دون فرع بديل |
| إرجاع القيمة null | if (hidden) return null; | إخفاء المكون كلياً دون ترك أي عقدة فارغة في DOM |
function PromoStrip({ message, visible }) {
if (!visible) {
return null;
}
return <aside className="rx-card">{message}</aside>;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيفية التحكم الديناميكي في واجهة React عبر الإرجاع المبكر بجملة if والمعامل الثلاثي والمعامل المنطقي الآمن، وتفاديت خطأ طباعة الرقم 0 غير المقصود، واستخدمت إرجاع null لإخفاء المكونات بنظافة. الخطوة التالية: انتقل الآن إلى الدرس رقم 13 «عرض القوائم وتصفيتها باستخدام map وfilter» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Conditional Rendering العرض الشرطي
- إرجاع عناصر واجهة مختلفة أو إخفاء أجزاء منها ديناميكياً بناءً على قيم الخصائص أو الشروط البرمجية.
- للمراجعة
- 02 Early Return Guard حارس الإرجاع المبكر
- شرط فحص في مطلع دالة المكون يعيد واجهة بديلة أو null فوراً قبل الوصول إلى شجرة العرض الرئيسية.
- للمراجعة
- 03 Short-Circuit Evaluation التقييم المنطقي المختصر
- سلوك في JavaScript يتوقف فيه المعامل المنطقي فوراً ويعيد الطرف الأيسر إن كان كاذباً أو يعيد الأيمن إن كان صائباً.
- للمراجعة
- 04 Null Render الإرجاع الفارغ null
- إرجاع القيمة null من دالة المكون لإخفائه بصرياً بالكامل دون إضافة أي عنصر في شجرة المتصفح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSX JSX
- JavaScript XML
- صياغة تقبل التعابير البرمجية كالمعامل الثلاثي والمقارنات المنطقية داخل الأقواس المعقوفة.
- للمراجعة
- 02 UI UI
- User Interface
- تتكيف لحظياً مع صلاحيات المستخدم وحالة توفر البيانات عبر التفرعات الشرطية.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- لا تُنشأ فيها أي عقدة عندما يعيد التعبير الشرطي في React قيمة منطقية كاذبة أو null.
- للمراجعة
- 04 RBAC RBAC
- Role-Based Access Control
- نمط التحكم بالوصول حسب الدور، وينعكس في الواجهة بإظهار أدوات الإدارة شرطياً مع التحقق الفعلي بالخادم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال InboxHeader في محرر التجريب وجرّب تمرير 0 ثم 7 وتأكد من عدم طباعة رقم صفر شارد في الواجهة.
-
افتح مثال PromoStrip في محرر التجريب وعدّل خاصية الإظهار من false إلى true لمشاهدة كلا التنبيهين.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
لماذا لا يمكن كتابة جملة الشرط if (isAdmin) مباشرة بداخل الأقواس المعقوفة {} في JSX؟
لأن أقواس JSX تقبل التعابير المنتجة لقيمة فقط مثل المعامل الثلاثي، بينما تُعد if جملة تحكمية وليست تعبيراً.
ماذا يظهر على الشاشة إذا كانت قيمة count تساوي 0 وكتبت داخل الواجهة {count && <span>Items</span>}؟
يعيد التعبير الرقم 0 نفسه، وتقوم React بطباعة الرقم 0 كنص مرئي على الشاشة.
كيف تصحح التعبير {count && <Badge />} لضمان عدم طباعة أي شيء عندما تساوي قيمة count صفراً؟
نحول الشرط إلى مقارنة منطقية صريحة مثل {count > 0 && <Badge />} لتعيد false عند الصفر.
ما القيمة التي ينبغي أن تعيدها دالة المكون في React عندما تريد إخفاءه تماماً دون رسم أي عنصر؟
إرجاع القيمة null يوجّه React لعدم إنشاء أي عقدة في شجرة المتصفح لذلك المكون.
تتجاهل React رسم أي عقدة في المتصفح عندما تكون نتيجة تعبير JSX هي false أو null أو undefined.
صواب؛ فهذه القيم لا تنتج أي مخرجات نصية أو عناصر في شجرة DOM.
أين توضع جملة الإرجاع المبكر if (!data) return <EmptyState /> داخل دالة المكون؟
توضع في أعلى جسم دالة المكون قبل جملة الإرجاع الرئيسية لتبسيط قراءة الكود.
أي معامل برمجي يتيح المفاضلة النظيفة بين <OnlineBadge /> و<OfflineBadge /> مباشرة داخل JSX؟
يُستخدم المعامل الشرطي الثلاثي (? :) للاختيار المباشر بين عنصرين داخل شجرة JSX.
يُنصح بتكديس أربعة أو خمسة معاملات ثلاثية متداخلة بدلاً من فصل المنطق في متغير واضح أو إرجاع مبكر.
خطأ؛ فالتداخل المفرط للمعاملات الثلاثية يضعف مقروئية الكود وصيانته.
إخفاء زر الحذف الإداري شرطياً في واجهة React يكفي لتأمين النظام دون التحقق من الصلاحية في الخادم.
خطأ؛ فالعرض الشرطي في المتصفح يحسّن تجربة الاستخدام فقط، ويجب فرض التحقق الأمني الفعلي في الخادم دائماً.
لماذا قد يسند المطور عنصر JSX إلى متغير محلي let badge قبل جملة الإرجاع ويحدثه داخل جمل if؟
لتنظيم الشروط المتعددة بوضوح تام وإبقاء شجرة الإرجاع النهائية نظيفة ومختصرة.