شرح صفوف ومحتوى الفقرة
عندما تريد إخفاء المكون بأكمله بحيث لا يترك حتى وسم حاوية فارغاً في الصفحة، أرجع القيمة null مباشرة من الدالة مثل if (!showBanner) return null;. كما يمكنك إسناد عنصر العرض الشرطي إلى متغير محلي مقروء قبل جملة الإرجاع عندما تتعدد الحالات. يلخص الجدول التالي متى تستخدم كل أسلوب:
| أسلوب العرض الشرطي | نمط الصياغة البرمجية | متى تختاره هندسياً |
|---|---|---|
| الإرجاع المبكر بجملة if | if (!ready) return <Fallback />; | تبديل مخرج المكون بالكامل بوضوح في أول الدالة |
| المعامل الثلاثي المضمن | {isPro ? <Pro /> : <Free />} | المفاضلة المباشرة بين عنصرين داخل شجرة JSX |
| المعامل المنطقي الآمن | {items.length > 0 && <Badge />} | إظهار عنصر اختياري عند تحقق الشرط فقط دون فرع بديل |
| إرجاع القيمة null | if (hidden) return null; | إخفاء المكون كلياً دون ترك أي عقدة فارغة في DOM |
HTML
function PromoStrip({ message, visible }) {
if (!visible) {
return null;
}
return <aside className="rx-card">{message}</aside>;
}
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيفية التحكم الديناميكي في واجهة React عبر الإرجاع المبكر بجملة if والمعامل الثلاثي والمعامل المنطقي الآمن، وتفاديت خطأ طباعة الرقم 0 غير المقصود، واستخدمت إرجاع null لإخفاء المكونات بنظافة. الخطوة التالية: انتقل الآن إلى الدرس رقم 13 «عرض القوائم وتصفيتها باستخدام map وfilter» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.