تفكيك الخصائص بتوقيع الدالة | تمرير البيانات إلى المكونات عبر Props

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

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

يؤدي تكرار كتابة البادئة props. قبل كل متغير داخل المكون إلى إطالة الكود دون فائدة. لذلك تعتمد مكونات React الحديثة أسلوب تفكيك الكائنات (Object Destructuring) مباشرة داخل قوسي تعريف الدالة مثل function StudioBadge({ title, subtitle, iconSrc })، مما يوضح مدخلات المكون فور النظر إلى سطره الأول.

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

مخطط يوضح مراحل تمرير الخصائص من سمات المكون الأب إلى كائن props ثم التفكيك بالقيم الافتراضية

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

HTML

function StudioBadge({ title, track, iconSrc }) {
  return (
    <div className="rx-card">
      <img src={iconSrc} alt={title} width="36" />
      <h3>{title}</h3>
      <p>{track}</p>
    </div>
  );
}

جرّب بنفسك

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

Destructuring Props Parameters تفكيك الخصائص بتوقيع الدالة

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

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