دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۹
  • فروردین

جلسه ۰۵ : کامپوننت Props در React Native

  • دسته‌بندی‌ها :
جلسه ۰۵ : کامپوننت Props در React Native
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. همونطور که مشاهده نموده اید ما تا ابن جا مبحث State یا حالت در React Native و تفاوت بین State و props رو بررسی نمودیم. حال در ادامه توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container همچنین کامپوننت Presentational در React Native رو نشون خواهیم داد.

      کامپوننت Props در React Native

      در بخش قبلی نشان دادیم که چگونه از state قابل تغییر استفاده کنیم. در این فصل، ما به شما نشان خواهیم داد که چگونه state و Props را ترکیب کنید.
      اجزای Presentational باید تمام داده ها را با عبور props ها دریافت کنند. فقط اجزای container باید وضعیت داشته باشند.

      کامپوننت Container

      اکنون ما درک می کنیم که اجزاء کانتینری چیست و چگونه کار می کند.

      تئوری

      حالا کامپوننت Container را به روز می کنیم. این کامپوننت state را اداره می کند و Props ها را به کامپوننت های presentational منتقل می کند.
      کامپوننت کانتینری تنها برای مدیریت state استفاده می شود. تمام قابلیت های مربوط به نمایش (ظاهر و غیره) در مولفه های presentational نشان داده می شود.

      مثال

      اگر ما بخواهیم از مثال فصل قبل استفاده کنیم، باید عنصر Text را حذف کنیم متن را از تابع render ، زیرا این عنصر برای ارائه متن به کاربران استفاده می شود.

      این باید درون کامپوننت presentational باشد.
      اجازه دهید کد داده شده را در مثال زیر مرور کنیم. ما  PresentationalComponent را import می کنیم و آن را به تابع render منتقل می کنیم.
      پس از وارد کردن PresentationProject و انتقال آن به تابع render ،باید Props را منتقل کنیم. ما از اضافه کردن myText = {this.state.myText} و deleteText = {this.deleteText} به <PresentationalComponent> استفاده می کنیم . در حال حاضر، ما قادر خواهیم بود به این درون کامپوننت های presentational  دسترسی داشته باشیم.

      App.js

      مثال : 

      کامپوننت Presentational در React Native

      اکنون ما درک می کنیم که یک مولفه ی Presentational چیست و همچنین چگونه کار می کند.

      تئوری

      اجزاء Presentational  باید فقط برای ارائه نمایش به کاربران استفاده شوند. این کامپوننت state را ندارند آن ها تمام داده ها و عملکردها را به عنوان props دریافت می کنند.
      بهترین روش این است که از کامپوننت presentational به همان اندازه که ممکن است استفاده شود.

      مثال

      همانطور که در فصل قبلی ما اشاره کردیم، ما از نحو کارکرد تابع EC6 syntax برای کامپوننت presentational استفاده می کنیم.
      کامپوننت ما props ها را دریافت می کند،عناصر قابل نمایش را برمی گرداند،

      متن فعلی با استفاده از {props.myText} تابع {props.deleteText} را هنگامی که یک کاربر بر روی متن کلیک می کند، فراخوانی کند.

      PresentationalComponent.js

      مثال : 

      در حال حاضر، ما همان تابع را در فصل State داریم. تنها تفاوت این است که ما کد را به کانتینر و کامپوننت presentational اصلاح کردیم.
      شما می توانید برنامه را اجرا کنید و متن را مانند تصویر زیر مشاهده کنید.

       

      مولفه Presentational در React Native

      مولفه Presentational در React Native

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

       

      مولفه Presentational در React Native

      مولفه Presentational در React Native

      کلام پایانی

      خب دوستان عزیز توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container همچنین کامپوننت Presentational در React Native رو نشون دادیم .

      در ادامه به استایل دهی در React Native خواهیم  پرداخت.

      QR:  جلسه ۰۵ : کامپوننت Props در React Native
      به اشتراک بگذارید