کامپوننت و props

کامپوننت و props

1022 961 سینا

ایجاد کامپوننت ها

با کامپوننت ها در مقالات قبلی آشنا شدیم. برای نوشتن کامپوننت ها به طور کلی دو روش وجود دارد.

  1. با استفاده از توابع جاوا اسکریپت
  2. استفاده از کلاس های ES6

در مثال زیر با استفاده از روش اول یک کامپوننت ری اکت ایجاد کرده ایم.

فعلا کاری با props نداریم و در ادامه با آن آشنا خواهیم شد. در این روش کامپوننت ما stateless خواهد بود. کامپوننت های stateless یا بدون حالت مزایای خاص خود را دارند که در آموزش های آینده بررسی خواهند شد. اما در مثال های بعدی مقالات ما از روش دوم استفاده خواهیم کرد.

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

این روش همان روشی است که در مقالات قبلی مشاهده کرده اید و در اینجا از توضیحات بیشتر آن خودداری میکنیم.

 

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

 

استفاده از کامپوننت و props

قبلا مشاهده کرده ایم که چگونه می توان از کامپوننت ها استفاده کرد. اما اینجا مفهومی به نام props را نیز مورد بررسی قرار می دهیم. به کامپوننت بالا نگاهی بیاندازید. در این کامپوننت همانطور که مشاهده می کنید عبارت props.name یا (this.props.name) وجود دارد. پس برای دسترسی به props در نوع اول کامپوننت ها به صورت مستقیم از کلیدواژه props استفاده می کنیم اما در نوع دوم کامپوننت ها از this.props باید استفاده کنیم.

اما props چیست؟

props در واقع اطلاعاتی است که کامپوننت ما نیاز دارد و این اطلاعات را باید در زمان استفاده از کامپوننت و از طریق attribute ها به آن بدهیم. برای مثال نحوه استفاده از کامپوننت Welcome بالا به این صورت است :

ما در اینجا از مشخصه name استفاده کرده و مقدار Reactfa را به عنوان مقدار به آن داده ایم. برای دسترسی به این مقدار از props.name درون کامپوننت استفاده می شود. در نتیجه عبارت زیر خروجی کامپوننت ما خواهد بود.

Hello Reactfa

در نتیجه شما می توانید از هر اسمی به غیر از اسامی رزرو شده استفاده کرده و مقادیر دلخواه خود را از طریق آن به کامپوننت بدهید و درون کامپوننت از طریق props به آنها دسترسی پیدا کنید.

 

props ها قابلیت ویرایش ندارند و در واقع Read-Only هستند.

در ری اکت شما نباید مقادیر props را به صورت مستقیم درون کامپوننت خود تغییر دهید. در واقع کامپوننت های ری اکت pure هستند و بر روی ورودی های خود تغییری ایجاد نمی کنند. اما سوالی که اینجا پیش می آید این است. برای ایجاد تغییرات داینامیک در کامپوننت چه کاری باید انجام داد؟جواب این سوال استفاده از state است که در آموزش بعدی توضیح داده خواهد شد.