حسام رسولیان
برنامه نویس موبایل

Props چیست؟ بررسی مفهوم Props در برنامه نویسی React Native

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
  1. نحوه استفاده از props

نحوه استفاده از 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>

حسام رسولیان
حسام رسولیان

برنامه نویس موبایل

کارشناسی فناوری اطلاعات برنامه نویس موبایل با زبان های جاوا, کاتلین, دارت(فلاتر) CCNA,LPIC

نظرات