انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: تنسيق المكونات في React

Inline Style Objects Syntax كائنات التنسيق المضمن style

نسّق مكونات React باحترافية عبر ملفات CSS وخاصية className، وكائنات style المضمنة، وتبديل الكلاسات الشرطية، وعزل الأسماء بـ CSS Modules، ودعم العربية بالخصائص المنطقية.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

عندما تعتمد قيمة بصرية على حساب رقمي متغير وقت التشغيل—مثل عرض شريط تقدم بالنسبة المئوية أو ارتفاع عمود بياني—نمرر كائن JavaScript إلى خاصية style بالصيغة style={{ width: '75%', backgroundColor: '#7750b2' }}.

لاحظ أنه لا يوجد سر خاص في القوسين المزدوجين {{ }}؛ فالقوس الخارجي يفتح تعبير JSX المعتاد، والقوس الداخلي يمثل كائناً برمجياً تُكتب مفاتيحه بصيغة camelCase بدلاً من الشرطة الوسطية.

الصف 2 كود برمجي
HTML 
function MasteryMeter() {
  const pct = 82;
  const fill = {
    width: `${pct}%`,
    height: 12,
    backgroundColor: '#7750b2',
  };
  return (
    <div className="rx-card"><div style={fill} /></div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

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