تمرير البيانات عبر Props

يعرض ProgressSummary الآن تقدم دورة React. يقرأ العنوان و النسبة و اللون مباشرة من course. لذلك سيعرض بيانات React حتى لو استخدمناه مرتين:

jsx

<ProgressSummary />
<ProgressSummary />

نريد أن تعرض البطاقة الثانية تقدم دورة Git بنسبة 25%. كيف نستخدم المكون نفسه للبطاقتين من دون نسخ JSX؟

جرب النسخ أولا

انسخ JSX الخاص ببطاقة التقدم إلى Dashboard مؤقتا. اجعل عنوان النسخة الجديدة Git on Your Machine و نسبتها 25 ثم افتح المعاينة.

انسخ JSX بطاقة التقدم لعرض Git مؤقتا.

ستظهر البطاقتان، لكن تغيير شكل بطاقة التقدم لاحقا سيحتاج إلى تعديل النسختين. لدينا بالفعل مكون لهذه البطاقة؛ ما ينقصه هو بيانات مختلفة لكل استخدام.

كيف نعطي كل استخدام بياناته؟

يحدد Dashboard عنوان كل بطاقة و نسبة تقدمها:

jsx

<ProgressSummary
  title={course.title}
  progress={course.progress}
/>
 
<ProgressSummary
  title="Git on Your Machine"
  progress={25}
/>

title و progress هما Props. يحدد الأب Dashboard مدخلات كل استخدام من ProgressSummary. يقرأ المكون هذه المدخلات ليعرض البطاقة دون أن يغيرها.

كيف يقرأ المكون Props؟

يمرر React المدخلات إلى دالة المكون في كائن واحد. يوضح هذا المثال الصغير كيف نقرأها بكتابة props.title و props.progress:

jsx

function ProgressSummary(props) {
  return <p>{props.title}: {props.progress}%</p>;
}

و يمكن استخراج القيم المطلوبة في مدخل الدالة باستخدام تفكيك الكائن (destructuring):

jsx

function ProgressSummary({ title, progress }) {
  return <p>{title}: {progress}%</p>;
}

الطريقتان تقرآن المدخلات نفسها. سنستخدم الثانية حتى تظهر أسماء المدخلات في تعريف المكون.

ماذا يحدث إذا لم نمرر اللون؟

نريد أن تحتفظ بطاقة React بلون course.accent و أن تستخدم بطاقة Git لونا افتراضيا. يوضح هذا المثال اللون وحده. نضع القيمة الافتراضية عند تفكيك المدخلات:

jsx

function ProgressSummary({ title, progress, accent = "#64748b" }) {
  return (
    <section style={{ borderColor: accent }}>
      {title}: {progress}%
    </section>
  );
}

إذا لم يمرر Dashboard قيمة لـ accent، تستخدم البطاقة اللون #64748b. يحدث الشيء نفسه إذا مرر accent={undefined}. أما accent={null} فلا يستبدل بالقيمة الافتراضية. القيمة الافتراضية لا تعمل مع كل قيمة falsy، بل عند غياب المدخل أو وصول undefined فقط. إذا مررنا 0 إلى خاصية لها قيمة افتراضية، فستبقى 0.

هل يصل `id` إلى عنصر HTML تلقائيا؟

يمكن للأب تمرير id إلى المكون:

jsx

<ProgressSummary
  id="react-progress"
  title={course.title}
  progress={course.progress}
/>

لكن React لا تضع هذا id على <section> تلقائيا. يقرأه ProgressSummary مثل بقية المدخلات ثم يحدد مكان استخدامه. في هذا المثال المختصر يضعه على <section>:

jsx

function ProgressSummary({ id, title }) {
  return <section id={id}><h2>{title}</h2></section>;
}

نمرر id إلى <section> صراحة باستخدام id={id}. بقية Props لا تنتقل تلقائيا أيضا. نستخدم title مثلا في العنوان و progress في شريط التقدم و accent للون الإطار.

اجعل البطاقتين تستخدمان المكون نفسه

احذف بطاقة Git المؤقتة. اجعل ProgressSummary يستقبل title و progress و accent و id و اجعل قيمة accent الافتراضية "#64748b".

استخدم ProgressSummary مرتين داخل Dashboard. مرر بيانات course و id="react-progress" لبطاقة React. مرر عنوان Git و progress={25} و id="git-progress" لبطاقة Git. لا تمرر accent إلى بطاقة Git حتى تستخدم القيمة الافتراضية. أبق بقية اللوحة كما هي.

اعرض بطاقتي React و Git بمكون ProgressSummary.

ضع id على <section> داخل ProgressSummary.

قبل فتح المعاينة توقع لون كل بطاقة. بعد أن تعمل البطاقتان ضع progress={0} مؤقتا على بطاقة Git. هل يعرض ProgressSummary الصفر الذي مررته إليه؟ أعد القيمة إلى 25 قبل تشغيل الاختبارات.

مكون واحد، مدخلات مختلفة

يحدد Dashboard مدخلات كل استخدام من ProgressSummary عبر Props. يقرأها المكون من دون تغييرها. لذلك يعرض الشكل نفسه ببيانات مختلفة و من دون نسخ JSX. و إذا أردنا أن يصل id إلى <section> فعلينا وضعه هناك صراحة.

في الدرس القادم سنرى كيف نضع محتوى مختلفا داخل مكون واحد باستخدام Composition و children.