اعتبارسنجی با propType و نمایش همبرگر

Validating Props with React PropTypes

0 55

اعتبارسنجی با propType و نمایش همبرگر

در قسمت قبل کامپوننت Layout و چند کامپوننت دیگر را کدنویسی کردیم. در این قسمت می خواهیم برای props یک نوع اعتبارسنجی ایجاد کنیم تا مطمئن شویم prop های خاص ما حتما پاس داده می شوند (یعنی فردی نتواند سفارشی را بدون هیچ کدام از مواد اولیه بخرد، مشخصا خرید «هیچ» یک عملیات غیرمنطقی است که نباید در برنامه ی ما وجود داشته باشد). برای اعتبارسنجی prop از همان پکیجی استفاده می کنیم که در فصل قبل در موردش صحبت کردیم؛ پکیج propType.

ابتدا باید این پکیج را در پروژه ی فعلی نصب کنیم بنابراین می گوییم:

حالا وارد فایل BurgerIngredient.js می شویم و در آنجا prop-type را import می کنیم تا بتوانیم از آن استفاده کنیم:

 شما می توانید از propTypes هم روی کامپوننت های کاربردی و هم روی کامپوننت های کلاس-محور استفاده کنید اما من ترجیح می دهم در این قسمت کامپوننت BurgerIngredient را تبدیل به یک کامپوننت کلاس محور کنم تا تبدیل کردن کامپوننت ها را هم تمرین کرده باشیم:

ابتدا component را import کنید:

سپس burgerIngredient را با کلیدواژه ی class می نویسیم تا شیء component را extend کند:

حالا درون بدنه ی BurgerIngredient باید متد render را بنویسیم (تمام کامپوننت های کلاس-محور به آن نیاز دارند) حالا می توانیم کدهای Switch از جلسه ی قبل را درون آن قرار دهیم:

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

همچنین به دلیل پیروی از قرارداد های نام گذاری، نام کامپوننت را با حرف بزرگ شروع کرده ام (BurgerIngredient)، شما هم اگر این کار را کرده اید باید در پایین صفحه و کنار دستور export حرف b را به B تبدیل کنید (دستور export به کوچکی و بزرگی حروف حساس است).

حالا اگر به کدمان نگاه کنیم هنوز یک مشکل را پیدا می کنیم. در کامپوننت های کلاس محور props.type کار نمیکند و به جای آن باید بگوییم this.props.type بنابراین:

حالا می توانیم برای کامپوننت خود propTypes تعیین کنیم. بالاتر از دستور export و خارج از خود کامپوننت می نویسیم:

یعنی ابتدا نام کلاس را می آوریم، سپس propTypes (با p کوچک و دقیقا به همین شکل) را صدا می زنیم. باید آن را برابر با یک شیء جاوا اسکریپتی قرار دهیم و در داخل آن برای یکی از props هایی که به این کامپوننت پاس داده خواهد شد (type) شروطی تعیین می کنیم. ابتدا باید نام import شده ی PropTypes را صدا بزنید (از آنجایی که من در هنگام import کردن آن را به شکل PropTypes نوشتم اینجا هم باید آن را به همین شکل بنویسم) و با اضافه کردن string اعلام میکنم که این prop باید یک رشته باشد. در آخر یک شرط دیگر هم به آن چسبانده ام که می گوید isRequired یعنی این prop اجباری است و حتما باید پاس داده شود.

هنوز نمی توانیم این کد را تست کنیم چرا که هنوز prop پاس داده شده (یعنی type) را ننوشته ایم. بنابراین به فایل Burger.js بروید تا کدنویسی این قسمت را انجام دهیم.

کدنویسی Burger.js

فعلا برای سادگی کار فقط مقداری JSX برمی گردانیم، بنابراین ابتدا بدنه ی اصلی را می نویسیم:

ما از قصد از یک div ریشه ای استفاده کرده ایم چرا که کامپوننت burger قرار است یک wrapper (در بردارنده) برای کامپوننت های دیگر درونش باشد و می خواهیم همه چیز در یک div قرار بگیرد. حالا باید استایل هایش را بنویسیم تا طول و عرض همبرگر را مشخص کنیم، بنابراین یک فایل جدید به نام burger.module.css را ایجاد کرده و کلاس زیر را در آن می نویسیم:

این کلاس ها بر اساس سلیقه ی ماست و شما می توانید آن ها را تغییر دهید. این کلاس مخصوص دستگاه های موبایل است بنابراین باید برای دستگاه های بزرگتر مانند لپتاپ ها و دستگاه های درازتر مانند گوشی های دراز نیز استایل بنویسیم:

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

این media query ها بر اساس سلیقه ی ما نوشته شده و سعی کرده ایم که کاری کنیم تا همبرگر در تمام سایزهای مختلف به خوبی نمایش داده شود، مانند بقیه ی کدهای CSS شما می توانید بر اساس سلیقه ی خود آن را تغییر دهید. در آخر باید کلاس CSS خود را وارد فایل Burger.js کنیم:

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

از آنجایی که هنوز هیچ مکانیسمی برای دریافت ورودی کاربر نداریم، به صورت دستی برخی از مواد اولیه را اضافه کرده ام. اگر یادتان باشد در propTypes تعریف کرده بودیم که type باید همیشه رشته باشد به همین دلیل اینجا هم آن را به صورت رشته نوشته ایم.

کار این کامپوننت نیز تمام شده است و حالا نوبت render کردن آن است. برای این کار به فایل BurgerBuilder.js بروید و به جای div ساده ی درون آن، همبرگر خودمان را قرار دهیم. در حال حاضر محتویات این فایل به شکل زیر است:

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

تمام فایل ها را ذخیره کرده و به مرورگر بروید. باید تصویر همبرگر را درون مرورگر مشاهده کنید:

همبرگر نمایش داده شده در مرورگر
همبرگر نمایش داده شده در مرورگر

در صورتی که در گوشه های همبرگر اسکرول بار را مشاهده می کنید، می توانید قسمت overflow در فایل burger.module.css را حذف کنید. در قسمت های بعدی می خواهیم کاری کنیم که کاربر تعیین کننده ی محتوای همبرگر باشد نه اینکه خودمان به صورت دستی کدهایش را بنویسیم.

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

ارسال نظر

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

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