اضافه کردن کامپوننت محتویات همبرگر

Add The Burger Contents Component

0 57

اضافه کردن کامپوننت محتویات همبرگر

در این قسمت باید همبرگر خود را کدنویسی کنیم. تمرکز اصلی ما روی اضافه کردن یک کامپوننت برای مدیریت محتویات همبرگر است. بنابراین برای شروع کار درون پوشه ی components یک پوشه ی دیگر به نام Burger می سازم که حاوی موارد زیر است:

  • فایلی به نام js (همبرگر نمایش داده شده به کاربر)
  • پوشه ای به نام BurgerIngredient که خود دارای دو فایل به نام های BurgerIngredient.js و BurgerIngredient.module.css است.

از آنجایی که تمرکز این دوره روی نوشتن کدهای CSS نیست، من این کدها را از قبل برایتان نوشته ام تا شما آن ها را کپی کنید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

با ذخیره کردن این فایل اتفاقی نمی افتد چرا که هنوز کامپوننت BurgerIngredient را تکمیل نکرده ایم. به فایل BurgerIngredient.js بروید تا این فایل را تکمیل کنیم:

تمام کامپوننت های کاربردی به همین شکل هستند، بنابراین ما هم از اینجا شروع می کنیم. از آنجایی که می خواهیم کدهای جاوا اسکریپت را درون این کامپوننت اجرا کنیم از {} به جای () استفاده کرده ایم. در واقع می خواهیم اطلاعات مربوط به ingredient را از props بگیریم؛ توجه داشته باشید که ingredient به معنی «مواد اولیه» مثل پنیر، گوشت و… است.

برای شروع متغیری به نام ingredient ایجاد کرده و مقدار آن را null می گذاریم تا در حالت پیش فرض چیزی نمایش داده نشود:

حالا می نویسیم:

کد بالا یک دستور switch ساده است که یک prop خاص به نام type را دریافت میکند (ما هنوز این prop را تعریف نکرده ایم و باید از قسمت دیگری به این کامپوننت پاس داده شود) سپس موارد تا تک تک چک کرده ایم. مثلا اگر bread-bottom (نان زیرین) داشتیم متغیر ingredient باید برابر با یک div با کلاس خاصی شود. این کلاس ها را در همان فایل CSS بالا تعریف کرده ایم اما شما می توانید طبق سلیقه ی خود نام آن ها را تغییر دهید. برای استفاده از کلاس ها ابتدا باید فایل CSS را import کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در این case گفته ایم اگر bread-top (نان بالایی همبرگر) وجود داشت مقدار ingredient را برابر یک div قرار بده (کلاس BreadTop) که خود دارای دو div دیگر با کلاس های Seeds1 و Seeds2 است. منظور ما از seed همان دانه های کنجد روی نان همبرگر است. از آنجایی که نان بالایی دارای کنجد است، متغیر ingredient پیشرفته تر شده است و باید دانه های کنجد را نیز نشان بدهد، به همین دلیل از علامت پرانتز استفاده کرده ایم.

باز هم ادامه می دهیم و switch را تا انتها کامل می کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

همانطور که می بینید در قسمت آخر متغیر ingredient را return کرده ایم. این ها تمام کلاس های CSS ای بود که به شما داده شد. در قسمت بعد می خواهیم PropType را اعتبار سنجی کنیم تا مطمئن شویم یک prop با نام type را دریافت خواهیم کرد، شما می توانید قبل از جلسه ی آینده خودتان این کار را انجام دهید؛ اگر یادتان باشد استفاده از پکیج PropType را در جلسات فصل قبل آموزش داده بودیم.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle