همه چیز در مورد Props و PropTypes در React



visibility  
mode_comment   ۰

همه چیز در مورد Props و PropTypes در React

در این مطلب یاد میگیرید که Props دقیقا چه چیزی هست و چه کاربردی دارد و چطور میتونین با استفاده از PropTypes همون داده‌هایی که نیاز دارید رو در اختیار Component قرار بدین و نوع یا Type اطلاعات رو بررسی کنید. پس با ما همراه باشید تا با کاربرد Props و PropTypes در React آشنا بشید.

React توسعه‌دهندگان رو تشویق میکنه که که رابط‌کاربری یا User interface سایتشون رو شکسته و اون رو به Component های کوچکتر تبدیل کنند. وقتی که اینکار رو انجام میدیم Component های زیادی به وجود میاد. پس یک راه باید وجود داشته باشه که بتونیم با استفاده از اون اطلاعات و داده‌ها رو بین Component ها رد و بدل کنیم. در بیشتر موارد این رد و بدل از سمت Component پدر یا Parent به Child یا فرزند هست.

React به اطلاعاتی که بین Component‌ها رد و بدل میکنیم، Props میگه و در این مطلب میخوایم با جزئیات بیشتری اون رو یاد بگیریم. وقتی که بحث از Props میشه، بهتره که نوع اونا رو هم مشخص کنیم تا داده‌های درستی به Component ما برسه. به همین دلیل از PropTypes برای اینکار استفاده میکنیم. در این مطلب اطلاعات کاملی در مورد Props و PropTypes در React در اختیارتون قرار میگیره.

Props: اطلاعاتی که بین Component ها جابجا میشن

یکی از دلایلی که React معروف شده و خیلی‌ها از اون استفاده میکنن، اینه که میتونین اون رو به Component های کوچک کوچک شکسته و با استفاده از Props بین اونا ارتباط برقرار کنید. پس یکی از مهمترین مزایای React، بحث Props است. وقتی از Component ها استفاده میکنیم و یک صفحه رو باز میکنیم، فقط اون اطلاعات و Component هایی نشون داده میشه که مورد نیاز هستند و چیزی بیشتر نشون داده نمیشه و این ویژگی باعث میشه که Performance بالاتر بره.

اطلاعات و داده‌ها میتونن در انواع مختلفی مثل String یا Array یا ... باشن. در ادامه نحوه پاس دادن و گرفتن Props به Component رو بهتون آموزش میدیم.

پاس دادن و دسترسی به Props

فرض کنید که بخوایم یک اپلیکیشن ساده که یک لیستی از دموهای زیبای سایت Codepen رو نشون میده، درست کنیم. ما میتونیم برنامه خودمون رو به Component های کوچکتری بشکونیم. بصورت زیر:

همونطور که میبینید 2 کامپوننت PenList و Pen در تصویر قرار داده شده است. PenList یک لیست از pen ها رو در خودش جا میده و Pen هم ساختار مربوط به هر pen رو تعریف میکنه.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

در ابتدا به اطلاعات مربوط به pen ها نیاز داریم. فرض کنیم که اطلاعات بصورت زیر باشن:

میبینید که یک آرایه از 4 Object که هر کدام ویژگی‌های title و url و author داره، تعریف کردیم. از این آرایه در کامپوننت App که کامپوننت ریشه هم هست، استفاده میکنیم. بصورت زیر:

همونطور که میبینید آرایه pensList که به وجود آوردیم رو بعنوان یک Prop به کامپوننت PenList پاس دادیم. اسم این Prop که اطلاعات رو برای اون قرار دادیم، pens هست و بنابراین در کامپوننت PenList میتونیم بنام pens به این اطلاعات دسترسی داشته باشیم.

کامپوننت PenList رو بصورت زیر تعریف کردیم:

همونطور که میبینید با استفاده از props.pens به اطلاعات مورد نظر دسترسی پیدا کردیم و روی اونا map زدیم و آیتم‌های مربوط به لیست رو به وجود آوردیم. در هر آیتم از یک کامپوننت Pen استفاده کردیم تا اطلاعات مربوط به هر pen رو نمایش بدیم. با استفاده از ... هم همه ویژگی‌های مربوط به pen رو بصورت Props به کامپوننت Pen پاس دادیم.

کامپوننت PenList که در بالا تعریف شده، بصورت ساده هست و از Class استفاده نکردیم. اگر از Class ها برای تعریف کامپوننت استفاده کنیم، باید با استفاده از this.props.pens به props ها دسترسی داشته باشیم. بصورت زیر:

چیز دیگه‌ای که باید به اون توجه داشته باشیم، استفاده از ویژگی key برای li هست. key یک نشانگر یکتا هست که ما به هر آیتم نسبت میدیم تا React بین اونا تمایز قائل بشه و با Performance بالاتری اونا رو رندر کنه. در این حالت ما از url هر pen بعنوان key استفاده کردیم، چون مطمئن هستیم که url ها با هم تفاوت دارند.

بالاخره به کوچکترین کامپوننت یعنی Pen میرسیم که اطلاعات مربوط به pen رو نمایش میده.

میبینید که از ویژگی‌های url و title و author در جاهای مورد نظر استفاده کردیم. به همین سادگی.

PropTypes

PropTypes به شما اطمینان میده که همون اطلاعاتی که شما انتظار دارید به کامپوننت شما ارسال میشه و در غیر اینصورت با ارور مواجه خواهید شد. برای اینکه بتونین از PropTypes در پروژه خودتون استفاده کنید، باید در ابتدا بسته prop-types رو نصب کنید.

حالا باید این بسته رو در پروژه import کنیم:

فرض کنیم که بخوایم برای کامپوننت Pen، نوع props ها رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:

همونطور که میبینید در ابتدا یک ویژگی propTypes برای کامپوننت Pen اضافه کردیم و در اون مشخص کردیم که ویژگی‌های title و url و author بصورت رشته‌ای هستند و نه عدد و نه تابع و ...

اگر اشتباها بجای رشته از PropTypes.number برای author استفاده کنیم، با هشدار زیر روبرو میشیم:

پس همونطور که میبینید PropTypes ها بهمون در پیدا کردن باگها کمک میکنه. همینطور میتونیم با استفاده از ویژگی isRequired اونا رو ضروری کنیم و بگیم که این کامپوننت حتما به این ویژگی نیازمند است.

برای اطلاعات بیشتر در مورد PropTypes میتونین مستندات اون رو مطالعه کنید.

اگر ویژگی‎هایی دارید که isRequired نیستند و دلخواه هستند، میتونین برای اونا یک مقدار پیش‌فرض تعریف کنید تا زمانی که پاس داده نمیشن، این مقدار پیش فرض برای اون ویژگی مدنظر قرار گرفته بشه.  بصورت زیر:

حالا اگر title رو پاس ندیم، مقدار پیش‌فرض sample codepen قرار داده میشه.

نتیجه‌گیری

در این مطلب در مورد Props و PropTypes در React توضیحاتی رو دادیم و سعی شد با استفاده از مثالها کاربرد اونا رو بطور کامل برای شما روشن کنیم.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.