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

Passing Diverse Data Types تمرير مختلف أنواع البيانات

تعلّم كيفية تخصيص مكونات React الدالية بتمرير البيانات عبر Props وتفكيك المعاملات مع تعيين القيم الافتراضية والالتزام بقاعدة القراءة فقط وتمرير الخصائص بأمان.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

لا تقتصر الخصائص في React على النصوص الثابتة؛ إذ يتيح لك استخدام الأقواس المعقوفة {} تمرير أي نوع بيانات قياسي في JavaScript بدقة تامة:

  • السلاسل النصية: تُكتب مباشرة بين علامتي تنصيص مثل role="Architect".
  • الأرقام والقيم المنطقية: تُمرر داخل أقواس مثل seats={25} وisVerified={true} لكيلا تتحول إلى نصوص.
  • المصفوفات والكائنات: تُمرر كتعابير برمجية مثل tags={['UI', 'JSX']} أو كائن داخل قوسين مزدوجين meta={{ hours: 8 }}.
الصف 2 كود برمجي
HTML 
function WorkstationSpec(props) {
  return (
    <div className="rx-card">
      <h3>{props.device.name}</h3>
      <p>Memory: {props.ramGb} GB</p>
      <p>Ready: {props.inStock ? 'Yes' : 'No'}</p>
    </div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (تمرير البيانات إلى المكونات عبر Props)