تبديل الكلاسات ديناميكياً بالشرط | تنسيق المكونات في React

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

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

لتبديل المظهر البصري تبعاً لحالة المكون—كتمييز التبويب النشط أو البطاقة المميزة أو تنبيه التحذير—تجنب تكرار كائنات التنسيق الطويلة، وركّب سلسلة كلاسات شرطية بنظافة عبر القوالب النصية `card ${isFeatured ? 'is-featured' : ''}` أو بتصفية مصفوفة الكلاسات عبر filter(Boolean).join(' ').

الصف 2 صورة توضيحية

مخطط أساليب تنسيق مكونات React الأربعة: ملفات CSS وCSS Modules وكائنات style والخصائص المنطقية للعربية

الصف 3 كود برمجي

HTML

function BuildStatusBanner() {
  const passed = true;
  const cls = [
    'status-banner',
    passed && 'is-online',
  ].filter(Boolean).join(' ');
  return (
    <div className={cls}>All 10 Gates Passed</div>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Dynamic Conditional Class Names تبديل الكلاسات ديناميكياً بالشرط

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

جميع فقرات هذا الدرس (تنسيق المكونات في React)