Props در ReactJS – آموزش ReactJS

  • پنجشنبه ۹ اسفند ۱۳۹۷
  • بازدید ۱,۳۸۷ نفر

تصویر reactjs-props-overview_6115 Props در ReactJS - آموزش ReactJS

Props در ReactJS

در این بخش props در ReactJs را بررسی خواهیم کرد. تفاوت اصلی میان state و props در فریم ورک ReactJS این است که props غیرقابل تغییر است.

استفاده از props

زمانی که در داخل یک کامپوننت به داده های غیرقابل تغییر نیز داشته باشیم، می توانیم از props استفاده کنیم. برای این منظور کافیست، آن ها را با تابع reactDOM.render در فایل main.js اضافه کنید. مانند نمونه زیر:

محتوای فایل App.jsx:

محتوای فایل main.js:

خروجی مثال فوق:

تصویر reactjs-props-overview_6115_1 Props در ReactJS - آموزش ReactJS

Props های پیشفرض

شما همچنین می توانید به جای اضافه کردن props ها در تابع ReactDOM.render، آن ها را در داخل سازنده کامپوننت ایجاد کنید. مانند نمونه زیر:

محتوای فایل App.jsx:

محتوای فایل main.js:

خروجی دقیقا مشابه مثال قبلی است:

تصویر reactjs-props-overview_6115_2 Props در ReactJS - آموزش ReactJS

State و Props

مثال زیر نحوه ترکیب state و props در برنامه را نشان می دهد. ما state و props را در کامپوننت اصلی (والد) تنظیم کرده و آن را به کامپوننت های فرزند ارسال می کنیم.

محتوای فایل App.jsx:

محتوای فایل main.js:

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

تصویر reactjs-props-overview_6115_3 Props در ReactJS - آموزش ReactJS

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است