العرض الشرطي (Conditional Rendering) باستخدام المعامل الثلاثي والـ Short-circuit &&
| المفهوم الهندسي | الآلية البرمجية داخل ريأكت | الفائدة المباشرة |
|---|---|---|
| Ternary Operator | تقييم شرط وإرجاع أحد خيارين بديلين (True/False) داخل أقواس JSX | التبديل بين واجهتين مختلفتين تماماً كعرض زر 'تسجيل الدخول' أو 'الملف الشخصي' حسب حالة المستخدم |
| Short-Circuiting && | تقييم الطرف الأيمن فقط إذا كان الطرف الأيسر صحيخاً (True) | إظهار عنصر واحد أو إخفاؤه تماماً بناءً على تحقق شرط معين كعرض رسالة خطأ أو إشعار تنبيه |
| إرجاع null الشرطي | إرجاع قيمة null من المكون عند عدم تحقق الشرط المطلق | منع المكون من رندرة أي وسوم في الـ DOM تماماً وتوفير الموارد البرمجية |
في التطبيقات الحديثة، لا تظل الواجهة ثابته طوال الوقت؛ فالواجهة تتغير ديناميكياً بناءً على الشروط:
هذه العملية تُسمى العرض الشرطي (Conditional Rendering). وبما أن وسوم JSX لا تقبل جمل الشرط التقليدية if/else في قلبها المباشر، فنحن نعتمد على أدوات جافا سكريبت الذكية داخل الأقواس المجعدة { }.
يُستخدم المعامل الثلاثي عندما يكون لديك خياران بديلان: "إذا كان الشرط يتحقق فافعل X، وإلا فافعل Y". الصياغة:
| 1 | condition ? expressionIfTrue : expressionIfFalse |
يُستخدم معامل المنطق && عندما يكون لديك خيار واحد فقط: "إذا كان الشرط يتحقق فاقم برندرة هذا العنصر، وإلا فلا تعرض أي شيء على الإطلاق". الصياغة: condition && expressionIfTrue
دعنا نرى كيف نطبق هذه المفاهيم في مكون شريط العلوية (Header) لمنصة نوفيل:
| 1 | import { useState } from 'react'; |
| 2 | |
| 3 | function Header() { |
| 4 | // حالات تجريبية لمحاكاة الوضع الشرطي |
| 5 | const [isLoggedIn, setIsLoggedIn] = useState(true); |
| 6 | const [unreadNotificationsCount, setUnreadNotificationsCount] = useState(3); |
| 7 | const [hasError, setHasError] = useState(false); |
| 8 | |
| 9 | return ( |
| 10 | <header style={{ padding: '20px', borderBottom: '2px solid #673ab7', fontFamily: 'sans-serif' }}> |
| 11 | <h2>منصة نوفيل التعليمية</h2> |
| 12 | |
| 13 | {/* 1. استخدام Short-Circuiting && لإظهار بطاقة الخطأ فقط عند وجود خطأ */} |
| 14 | {hasError && ( |
| 15 | <div style={{ backgroundColor: '#ffebee', color: '#c62828', padding: '10px', borderRadius: '5px', marginBottom: '10px' }}> |
| 16 | ⚠️ حدث خطأ أثناء الاتصال بالسيرفر! |
| 17 | </div> |
| 18 | )} |
| 19 | |
| 20 | {/* 2. استخدام المعامل الثلاثي للتبديل بين أزرار الدخول والملف الشخصي */} |
| 21 | <div className="user-actions"> |
| 22 | {isLoggedIn ? ( |
| 23 | <div> |
| 24 | <span>أهلاً بك يا مهندس! </span> |
| 25 | <button style={{ backgroundColor: '#673ab7', color: '#fff', padding: '8px 12px', border: 'none', borderRadius: '4px' }}> |
| 26 | الملف الشخصي |
| 27 | </button> |
| 28 | </div> |
| 29 | ) : ( |
| 30 | <button style={{ backgroundColor: '#4caf50', color: '#fff', padding: '8px 12px', border: 'none', borderRadius: '4px' }}> |
| 31 | تسجيل الدخول |
| 32 | </button> |
| 33 | )} |
| 34 | </div> |
| 35 | |
| 36 | {/* 3. استخدام && لإظهار شارة الإشعارات فقط إذا كان العدد أكبر من صفر */} |
| 37 | <div style={{ marginTop: '15px' }}> |
| 38 | <span>الإشعارات 🔔 </span> |
| 39 | {unreadNotificationsCount > 0 && ( |
| 40 | <span style={{ backgroundColor: '#ff9800', color: '#fff', padding: '2px 8px', borderRadius: '50%', fontSize: '12px' }}> |
| 41 | {unreadNotificationsCount} |
| 42 | </span> |
| 43 | )} |
| 44 | </div> |
| 45 | </header> |
| 46 | ); |
| 47 | } |
| 48 | |
| 49 | export default Header; |
تخيل أنك كتبت الكود التالي لعرض الرسائل إذا كان عددها أكبر من صفر:
| 1 | // ❌ كود يسبب فخاً برمجياً خطيراً! |
| 2 | {messages.length && <MessageList messages={messages} />} |
| 3 |
إذا كانت المصفوفة messages فارغة، فإن طولها يساوي 0. في جافا سكريبت، المعامل && عندما يرى الرقم 0 في الطرف الأيسر، ينفذ خاصية الـ Short-circuit ويرجع الرقم 0 نفسه كقيمة! والنتيجة؟ ستفاجأ بظهور الرقم 0 مطبوعاً كـ نص في منتصف واجهة موقعك بشكل مشوه بدلاً من إخفاء المكون! الحل الصحيح دائماً: تحويل الطرف الأيسر إلى قيمة منطقية صريحة (Boolean) باستخدام المقارنة الصريحة:
| 1 | // ✅ كود احترافي آمن تماماً |
| 2 | {messages.length > 0 && <MessageList messages={messages} />} |
| 3 |