مفهوم props در React

props_thumb

خب بدون مقدمه بریم سراغ مفهوم props در React

این وبسایت بیشتر حول محوریت React و Node.js و PHP خواهد بود.

اگه دوستان سوالی در زمینه های دیگه هم داشته باشند باز پاسخ داده میشه که البته سعی می کنم یک بخش برای این سوالات در نظر بگیریم.

مفهوم Props

خب اول طبق روال همیشه وقتی یک مفهوم جدید رو در پیش داریم دنبال معنی اون کلمه می گردیم.

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

مفهوم props در React بیشتر به معنای ورودی هاست.

فرض کنین شما یک Functional Component به شکل زیر دارید :

یک کامپوننت بسیار ساده داریم که میخوایم Vionic رو از کامپوننت بالا دستی بفرستیم و یا دریافت کنیم !

ابتدا این کامپیوننت رو در render کامپوننت بالا دستی فراخوانی می کنیم به شکل زیر :

و سپس به شکل زیر به کامپوننتی که فراخوانی کردیم ورودی ارسال میکنیم :

در واقع اینجا ما به کامپوننت sayHello یک name با مقدار Vionic ارسال کردیم که به عنوان props این کامپوننت به حساب میاد.

و این کامپوننت میتونه ازش با props ها اینطور استفاده کنه :

اینجا ما props رو به عنوان ورودی این function بهش پاس دادیم و گفتیم شما این props هایی که از کامپوننت بالا دستی بهت ارسال شده رو داشته باش !

در قسمت کد jsx از یک جفت آکولاد { } استفاده کردیم که علتش رو خب حتما می دونید ولی اگه یادتون رفته یا نمی دونید بهتون میگم که ما در jsx تنها می تونیم کد های  jsx بنویسیم ( یا همون html خودمون به زبان ساده تر و نه دقیق تر )!

پس وقتی میخوایم کدهای جاوا اسکریپت بنویسیم لازمه که اون کد ها رو درون یک آکولاد { } قرار بدیم.

ویژگی های مهم props

چند تا ویژگی مهم دارن این ورودی ها که اولیش یا معروف ترینش اینه که Read Only هستند.

این یعنی اینکه فقط خونده میشن !

یعنی شما نمیتونید در مثال بالا در کامپوننت زیر دستی بیاید و Vionic رو عوض کنید ! ( میشه ها 😀 فقط یه پست خیلی شیرین می طلبه اما به صورت پیش فرض بدونید که مستقیما نمیشه تغییرش بدید )

در کامپوننت هایی که به صورت کلاس هایی ارث بری شده از Component ری اکت نوشته می شوند شما می تونید با تعریف state به این props ها دسترسی داشته باشید و دیگه اون موقع توی jsx باید از this جهت دستیابی به مقادیر استفاده کنید. 😆

به روز رسانی : 1397/09/30

خب طبق تصمیماتی که برای طراحی بهتر سایت گرفتیم قرار شد عکس های مفهومی هر مطلب رو در انتهای مطلب قرار بدیم:

می تونید روی عکس کلیک کنید و در سایز اصلی ببینید!

props

Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

75 − = 69