Props در ReactJS – آموزش ReactJS

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

reactjs props overview 6115 تصویر

Props در ReactJS

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

استفاده از props

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

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

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

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

reactjs props overview 6115 1 تصویر

Props های پیشفرض

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

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

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

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

reactjs props overview 6115 2 تصویر

State و Props

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

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

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

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

reactjs props overview 6115 3 تصویر

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

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