درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
حسام رسولیان
امتیاز: 14834
رتبه:45
26
55
9
117
دانشجوی کارشناسی IT برنامه نویس Java, PHP,JS CCNA,LPIC پروفایل کاربر

مفهوم props در برنامه نویسی React Native

تاریخ 5 ماه قبل
نظرات 0
بازدیدها 144
اگر در حال یادگیری برنامه نویسی Reactjs/React Native هستید یا قصد شروع آن را دارید یکی از بخش هایی که در طول کد نویسی با آن سر و کار دارید props و state ها می باشند. به همین منظور در این مطلب با هم دیگه با مفهوم props آشنا میشیم.
در کل ما از props و state برای ذخیره کردن اطلاعات موقت در برنامه خودمون استفاده می کنیم یعنی با هربار باز و بسته شدن برنامه این اطلاعات از بین می روند.
اما فرق props با state این هست که اطلاعات props در طول برنامه ثابت و غیر قابل تغییر می باشد اما state قابلیت تغییر اطلاعات را دارد.

نحوه استفاده از props

با props ما اطلاعاتی که نیاز داریم و به هر تگی که بخواهیم میتونیم پاس بدیم و بسته شرایط این اطلاعات و در داخل تگ میتونیم نمایش دهیم یا عملیات های مختلف و روش انجام بدیم.
فرض کنید یک تگ به شکل زیر داریم
 <View>
     	 <Heading '/>
     </View>

این تگ خیلی ساده هست و هیچ props ایی ندارد اما اگر بخواهیم به این تگ Heading یک props نیز اضافه کنیم باید در کد های کامپوننت Heading به شکل زیر عمل کنیم

export default class Heading extends React.Component {
  render () {
    return (
      <View>
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}

در کد که بالا گفتیم هروقت از تگ Heading استفاده کردیم میتونیم یک props با نام message به این تگ پاس دهیم و این تگ هم اطلاعات این props و داخل یک متن نمایش می دهد نحوه دسترسی یه props به شکل زیر می باشد.
this.props.anyname

حالا به شکل زیر در هر صفحه که از تگ Heading استفاده کردیم میتونیم props ایی با نام message به آن پاس دهیم.
 <View>
     	 <Heading message={'any text...'}/>
     </View>
برچسب ها
ردیف عنوان
1 ساخت اولین پروژه React Native
2 مفهوم props در برنامه نویسی React Native
3 کار کردن با state در React Native
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید