انتقل إلى محتوى الدرس

Inline Ternary Operator JSX المعامل الثلاثي داخل JSX

تحكّم ديناميكياً في إظهار عناصر واجهة React وإخفائها عبر الإرجاع المبكر بجملة if والمعامل الثلاثي والعرض الشرطي الآمن وإرجاع null وتجنب طباعة الصفر.
4 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

بما أن الأقواس المعقوفة {} داخل JSX لا تقبل سوى التعابير البرمجية المنتجة لقيمة ولا تقبل جملة if المباشرة، نستخدم المعامل الشرطي الثلاثي (condition ? exprA : exprB) للتبديل الأنيق بين نصين أو كلاسين أو مكونين فرعيين في قلب شجرة العرض.

الصف 2 صورة توضيحية
مخطط يقارن أساليب العرض الشرطي الثلاثة في React: الإرجاع المبكر بجملة if والمعامل الثلاثي والمعامل المنطقي الآمن
الصف 3 كود برمجي
HTML
function ServerRow({ region, isHealthy }) {
  return (
    <div className="rx-card">
      <strong>{region}: </strong>
      <span>{isHealthy ? 'Online' : 'Offline'}</span>
    </div>
  );
}
الصف 4 ملاحظة هامة