Conditional Rendering العرض المشروط
آخر تحديث: 2026-11-03
Conditional Rendering العرض المشروط
لا يوجد وسم if في React: العرض المشروط يعني كتابة منطق JavaScript عادي — عبارات if وعوامل ثلاثية و&& — داخل JSX لتقرّر الحالة أي جزء من الواجهة يُعرض، أو هل نعيد null. وهكذا يستطيع مكوّن واحد أن يقدّم واجهة مختلفة تماماً في المواقف المختلفة. والأعراف الأربعة الشائعة هي العامل الثلاثي و&& والإرجاع المبكر والمتغيّرات المحسوبة مسبقاً.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
{isLoggedIn ? <UserPanel /> : <LoginButton />} // العامل الثلاثي: اختر واحداً من اثنين
{unread > 0 && <Badge count={unread} />} // &&: اعرضه أو لا تعرض شيئاً
if (!ok) return null // الإرجاع المبكر: لا تعرض أي شيء على الإطلاقالقيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض اللوحة في البداية «Please log in first» مع زر؛ وبعد تسجيل الدخول تظهر رسالة ترحيب و«You have 3 unread messages»؛ والضغط على «Mark all as read» يزيل تنبيه غير المقروء ويظهر «All messages read».💡 النقاط الأساسية
⚠️ تحذير حين يكون يسار && هو الرقم 0، ستعرض الصفحة «0» (لأن 0 && ... يساوي 0)، فاكتب unread > 0 && بدلاً منه.
💡 نصيحة حين تكون الفروع كثيرة ومعقّدة، استخرج القرار في دالة أو أرجع مبكراً بدل تداخل العوامل الثلاثية في كتلة JSX واحدة.
ℹ️ ملاحظة إعادة null تعني أن المكوّن لا يعرض شيئاً، وهي مفيدة لإخفاء مكوّن كامل حين لا يملك المستخدم الصلاحية.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما طرق كتابة العرض المشروط في React؟
ج أربعة أنماط شائعة: العامل الثلاثي (اختر واحداً من اثنين)، و&& (اعرضه أو لا تعرض شيئاً)، والإرجاع المبكر، واستخراج الفروع إلى متغيّرات أو دوال قبل تضمينها في JSX.
س ماذا أفعل إذا عرض && الرقم 0؟
ج لأن 0 && x يساوي 0 ويُعرض. حوّل الشرط إلى مقارنة مثل count > 0 && ...، أو استخدم صيغة العامل الثلاثي لتفادي ذلك.
س هل يمكن كتابة if-else مباشرة داخل JSX؟
ج لا، القوسان المعقوفان يقبلان تعبيرات فقط. احسب متغيّراً بـ if قبل return، أو استخدم العامل الثلاثي للتعبير عن الفرع داخل JSX.
