Props در ری اکت چیست و چطور باید از Props استفاده کنیم ؟
Props در ری اکت یکی از مهمترین مفاهیمی هست که هر React Deverloper باید درک صحیح و عمیقی ازش داشته باشه. در حقیقت Props در React یکی از اولین مفاهیمی هست که ما به عنوان توسعه دهنده ری اکت باید یادش بگیریم.
تو این مقاله میخوایم یکبار برای همیشه Props در ری اکت رو بررسی کنیم 🙂
Props در ری اکت چیست ؟
Props در React برای انتقال یک دیتا از کامپوننت پدر به کامپوننت فرزند کاربرد داره !
Props ها ، ورودی کامپوننت ها هستن ! به کمک Props در React میتونیم به کامپوننت های خودمون ورودی بدیم.
اگه با جاوااسکریپت کار کرده باشید حتما با آرگومان های ورودی توابع آشنا هستین.. آرگومان های ورودی باعث میشدن ما بتونیم به تابع خودمون مقدار پاس بدیم و از اون مقدار در تابع استفاده کنیم.
Props در ری اکت معادل آرگومان ورودی توابع در جاوااسکریپت هستن!
Props ها به کامپوننت ها این اجازه رو میدن که مقادیر داینامیک و سفارشی داشته باشن. ( محتوا و خروجیشون استاتیک و ثابت نباشه )
برای اینکه کاربرد Props در React رو بتونیم متوجه بشیم بیاید یه نگاه عملی به Props داشته باشیم ..
تو تیکه کد زیر که کامپوننت پدر هست، ما یک کامپوننت به اسم Product فراخوانی کردیم.
import Product from "./Product"
function App() {
return (
<div>
<h1>محصولات ما</h1>
<div className="App">
<Product />
</div>
</div>
)
}
export default App
تو خط 8 تیکه کد بالا، یک کامپوننت به اسم Product فراخوانی کردیم. تو تیکه کد زیر میتونید این کامپوننت رو ببینید :
function Product() {
return (
<div>
<image src="/Pofak.png" />
<h4>پفک اشی مشی</h4>
<p>تازه و خوشمزه</p>
<h4>100 تومن</h4>
</div>
);
}
export default Product
در واقع کامپوننت product یک محصول هست که شامل عنوان محصول، تصویر، توضیحات و قیمت محصول هست.
خروجی کامپوننت بالا بصورت زیر هست :
حالا اگه بخوایم 3 بار این کامپوننت رو render کنیم و در صفحه نمایش بدیم، باید کامپوننت Product رو 3 مرتبه فراخوانی کنیم :
import Product from "./Product"
function App() {
return (
<div>
<div className="App">
<Product />
<Product />
<Product />
</div>
</div>
)
}
export default App
خروجی کد بالا :
نکته ای که وجود داره این هست که ما برای نمایش 3 محصول ، این کامپوننت رو 3 بار ننوشتیم !
یکبار کامپوننت Product رو نوشتیم و 3 بار فراخوانیش کردیم . حتی اگه قصد نمایش 100 محصول هم داشته باشیم، کافیه کامپوننت Product رو یک بار بنویسیم و صد مرتبه فراخوانی کنیم.
کد بالا به خوبی کار میکنه اما این کافی نیست ! چون ما نمیخوایم محصولاتی رو به کاربر نشون بدیم که عکس یکسان ، عنوان یکسان ، توضیحات و قیمت یکسان داشته باشن !!!
میخوایم هر محصول عکس، عنوان ، توضیحات و قیمت اختصاصی خودش رو داشته باشه ..
میخوایم خروجی زیر رو داشته باشیم :
برای اینکه در یک کامپوننت ، محتوای متغیر و داینامیک داشته باشیم باید از Props استفاده کنیم. در خروجی بالا ما یک کامپوننت Product داریم اما هر کامپوننت Product یک محصول متفاوت در خروجی نمایش میدهد.
چطور از Props در ری اکت استفاده کنیم ؟
کمی قبل تر گفتیم که میشه به کامپوننت ها در ری اکت، Props داد تا از اطلاعات داینامیک استفاده کنن.
اگه با HTML آشنا باشین، میدونید که ما میتونیم به تگ های HTML ، خصوصیت ( Attribute ) پاس بدیم. مثل :
<input type="password" placeholder="پسوردت رو وارد کن" />
تو مثال بالا ما به تگ Input در Html ، چندین خصوصیت دادیم.
دقیقا مثل تیکه کد بالا ، ما به کامپوننت ها در React میتونیم Props پاس بدیم. مثل مثال زیر :
<Product title="پفک اشی مشی" description="تازه و خوشمزه" price="100 تومن" img="pofak.png"/>
تو تیکه کد بالا ، ما به کامپوننت Product چندین Props پاس دادیم ( عنوان ، توضیحات ، تصویر و قیمت )
پس یعنی ما باید کامپوننت Product رو بجای حالت قبلی که 3 بار فراخوانی کردیم و 3 محصول مشابه بهمون نمایش داد ، اینجوری فراخوانی کنیم :
import Product from "./Product";
function App() {
return (
<div>
<h1>محصولات</h1>
<div className="App">
<Product title="پفک اشی مشی"
description="تازه و خوشمزه"
price="100 تومن"
img="pofak.png"/>
</div>
</div>
);
}
export default App;
تو تیکه کد بالا ، تونستیم هنگام فراخوانی کامپوننت Product بهش اطلاعات مختص خودش رو پاس بدیم. ( بهش props دادیم )
حالا برای اینکه از این Props ها بتونیم در کامپوننت Product استفاده کنیم، باید وارد کامپوننت Products بشیم و مقادیر استاتیک رو با مقادیر داینامیک ( خود Props ) جایگزین کنیم . در واقع باید به Props های پاس داده شده در کامپوننت Product دسترسی پیدا کنیم.
استفاده از Props در کامپوننت
طبق تیکه کد بالا ، حالا کامپوننت Product چهار Props دریافت کرده.
برای اینکه بتونیم از این Props های دریافت شده در خود کامپوننت Product استفاده کنیم، باید بصورت زیر عمل کنیم:
function Product(props) { // اینجا پراپس رو به عنوان ورودی کامپوننت دریافت کردیم
return (
<div>
<img src={props.img} /> // استفاده از پراپس عکس
<h4>{props.title}</h4> // استفاده از پراپس عنوان محصول
<p>{props.description}</p> // استفاده از پراپس توضیحات محصول
<h4>{props.price}</h4>// استفاده از پراپس قیمت محصول
</div>
);
}
export default Product
تو تیکه کد بالا گفتیم داخل این کامپوننت دیگه مقدار استاتیک نداشته باشیم و از Props هایی که به ما پاس داده میشن استفاده میکنیم.
تو خط 4 از Props آدرس تصویر استفاده کردیم تا هر تصویری که به ما پاس داده شد، اینجا نمایش داده بشه ( نه فقط یک عکس استاتیک و ثابت )
تو خط 5 ، گفتیم هر مقداری به عنوان title به ما پاس داده شد رو داخل تگ h4 نمایش میدیم.
تو خط 6 و 7 هم توضیحات و قیمتی که به این کامپوننت پاس داده شده، نمایش داده میشه.
اینجوری هر محصولی که دلمون بخواد، میتونیم نمایش بدیم. فقط کافیه اطلاعات مورد نظرمون رو با Props به اون کامپوننت پاس بدیم. ( از کامپوننت پدر به کامپوننت فرزند – یعنی در این مثال از App به Product )
تبریک 🙂 ما تونستیم یک کامپوننت reUsable ( قابل استفاده مجدد ) بسازیم.
یعنی هرچندتا محصولی که داشته باشیم میتونیم نمایش بدیم. فقط کافیه اطلاعات اون محصول رو با Props بهش پاس بدیم.
حالا برای اینکه 3 محصول خودمون ( پفک ، صابون و نخ دندان ) رو نمایش بدیم ، کافیه تو کامپوننت App به این صورت عمل کنیم:
import Product from "./Product";
function App() {
return (
<div>
<h1>محصولات</h1>
<div className="App">
// پفک
<Product title="پفک اشی مشی"
description="تازه و خوشمزه"
price="100 تومن"
img="pofak.png"/>
// صابون
<Product title="صابون گلنار"
description="حاوی روغن گلنار"
price="240 تومن"
img="golnar.png"/>
// نخ دندان
<Product title="نخ دندان اورال-بی"
description="پنجاه متری"
price="540 تومن"
img="oralb.png"/>
</div>
</div>
);
}
export default App;
خروجی تیکه کد بالا ، نمایش 3 محصول با تصویر ، عنوان ، توضیحات و قیمت دلخواه خودمونه 🙂
خروجی تیکه کد بالا :
ما اینکار رو به کمک Props در React تونستیم انجام بدیم.
Destructure کردن Props
اگه با جاوااسکریپت آشنا باشید، حتما اسم Object Destructuring به گوشتون خورده.
در واقع Destructuring یکی از قابلیت های خود جاوااسکریپت هست که به ما اجازه میده به یکی از آیتم های Object بصورت مستقیم دسترسی داشته باشیم.
از اونجاییکه Props خودش یک Object هست، پس ما میتونیم که این Object رو Destructure کنیم و به آیتم هاش مستقیما دسترسی داشته باشیم.
چرا اینکار رو میکنیم ؟ چون دیگه هربار عبارت props رو ننویسیم و کد خواناتری داشته باشیم.
بدون Props Destructuring
<h1>props.title</h1>
با Props Destructuring
<h1>title</h1>
اگه به مثال بالا توجه کنید، میبینید که میشه از Props های پاس داده شده به کامپوننت، بدون استفاده از عبارت Props استفاده کرد.
اینکار مخصوصا در جاهایی که شما بارها از اون Props میخواید استفاده کنید، کاربردیه.
به علاوه اینکه کد شما خیلی تمیزتر و خواناتر خواهد بود.
برای ایکه Props های خودمون رو Destructure کنیم و دیگه هربار Props رو ننویسیم باید بصورت زیر عمل کنیم :
const Product = ({ img, title, description, price }) => { {/* اینجا پراپس های خودمون رو دیستراکچر کردیم */}
return (
<div>
<img src={img} alt="products" />
<h4>{title}</h4> {/* without props.title */}
<p>{description}</p> {/* without props.description */}
<h4>{price}</h4> {/* without props.price */}
</div>
);
}
export default Product;
اگه به خط 1 دقت کنید، میبینید که دیگه آبجکت Props رو ننوشتیم. مستقیما آیتم هایی که بهش نیاز داریم رو نوشتیم ( img,title,description,price )
به اینکار Props Destructuring میگن.
و اگه به خط 4 تا 7 دقت کنید، میبینید که دیگه خبری از props.title یا props.price نیست !
توصیه میکنم حتما از Props Destructuring استفاده کنید تا کد های شما تمیزتر و خوانا تر باشن.
بیاید یه چند نکته مهم درمورد Props رو باهمدیگه مرور کنیم تا مطمئن بشیم که خوب Props در ری اکت رو درک کردیم 🙂
Props ها فقط خواندنی هستن ( قابل ویرایش نیستن ) !
یه نکته مهمی که باید در جریانش باشیم، این هست که Props ها صرفا خواندنی هستن و قابل ویرایش نیستن.
درحقیقت زمانیکه یک Props از کامپوننت والد به کامپوننت فرزند منتقل میشه، در کامپوننت فرزند ما امکان خواندن این Props رو داریم و نمیتونیم این Props رو تغییر بدیم!
تعیین نوع Props های دریافتی !
ما میتونیم نوع Props های دریافتی رو مشخص کنیم. بطور مثال میتونیم تعیین کنیم که یک Props با نام User فقط میتونه از نوع String باشه.
با انجام اینکار، این Props فقط امکان دریافت مقدار با نوع String داره و اگه مقداری با نوع دیگه مثل Number دریافت کنه، اپیکیشن به ما خطا میده.
انجام اینکار باعث میشه از بروز خطا های ناخواسته تو اپیکیشن جلوگیری کنیم. برای استفاده از این تکنیک میتونیم از PropTypes استفاده کنیم.
به کمک کتابخانه PropTypes میتونیم این کار رو بصورت زیر انجام بدیم :
import PropTypes from 'prop-types';
function MyComponent({ name, age }) {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};
تعیین مقدار پیشفرض Props در ری اکت !
ما میتونیم به Props های کامپوننت خودمون، یک مقدار پیشفرض اختصاص بدیم.
این خیلی کمک کنندس .. ممکنه گاهی اوغات کامپوننت والد، Props مورد نیاز کامپوننت فرزند رو در اختیارش نزاره.
با این روش کامپوننت فرزند دیگه رفتار غیرمنتظره و پیش بینی نشده نشون نمیده و از همون مقدار پیشفرضی که ما بهش اختصاص دادیم، استفاده میکنه.
Props در ری اکت تو کامپوننت های تابعی و کلاسی
Props صرفا برای Function Component ها نیست. ما میتونیم از Props تو Function Component و Class Component استفاده کنیم.
اما شکل استفاده ی اون متفاوت میشه.
اگه از Function Component استفاده میکنیم، میتونیم مستقیما از واژه کلیدی Props استفاده کنیم اما اگه از Class Component استفاده میکنیم باید از کلمه کلیدی this.props استفاده کنیم.
ممکنه برخی از کامپوننت ها Props نداشته باشن ؟
قطعا بله! اگر کامپوننت ما محتوای استاتیک نمایش میده ( مثل صفحه دریاره ما ) میتونه بدون Props باشه.
اما اگه کامپوننت ما محتوای داینامیک و متغیر نمایش میده ( مثل صفحه سبد خرید – چون سبد خرید هر کاربر با کاربر دیگه متفاوته ) باید از Props استفاده کنیم.
چرا Props در ری اکت ضروریه ؟!
درک و استفاده درست از Props خیلی مهمه. شاید سوال برامون پیش بیاد که چرا ؟
Props کامپوننت مارو reusable میکنه ( قابل استفاده مجدد ) :
Props در ری اکت به یک کامپوننت این اجازه رو میده که رفتار ها و خروجی های متفاوتی داشته باشه. این یعنی ما میتونیم کامپوننت هایی داشته باشیم که محتوای Dynamic ( داینامیک ) نمایش میدن.
بطور مثال کامپوننت سبد خرید میتونه با توجه به اقلام خریداری شده توسط کاربر ( که از طریق Props دریافت میشه ) خروجی و قیمت متفاوتی رو به کاربر نمایش بده.
جریان داده یکطرفه در ری اکت :
کنترل رفتار کامپوننت فرزند :
جمع بندی
از props در react میشه برای انتقال داده ( Data ) از کامپوننت پدر به کامپوننت فرزند استفاده کرد.
در حقیقت Props باعث میشه کامپوننت استاتیک ما ، داینامیک و reUsable ( قابل استفاده مجدد ) باشه . یعنی از یک کامپوننت بارها با اطلاعات متفاوت استفاده کنیم ( عکس ، متن و .. متفاوت )
تو این مقاله درمورد آموزش props در ری اکت صحبت کردیم. امیدوارم که Props در react رو خیلی خوب درک کرده باشید 🙂
تو این مقاله راجب چه چیزایی حرف زدیم ؟
Props ها ، ورودی کامپوننت ها هستن ! به کمک Props در React میتونیم به کامپوننت های خودمون ورودی بدیم.
در واقع میتونیم هر نوع Data رو از کامپوننت پدر به کامپوننت فرزند به کمک Props منتقل کنیم.
برای انتقال دیتا از کامپوننت پدر به کامپوننت فرزند.
داینامیک و reusable کردن کامپوننت ها.
هیچ محدودیتی در تعداد Props های دریافتی یک کامپوننت وجود نداره!
درواقع یک کامپوننت بینهایت Props میتونه داشته باشه.
19 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ممنون عالی بود
سلام و درود
خواهش میکنم مهدی جان خوشحالم که این مقاله برات مفید واقع شده 🙂
موفق باشی
Props در ری اکت یکی از اون چیزایی بود که چند بار داکیومنت و ویدئو دیدم ولی اصلا متوجه نمیشدم
دمتون گرم که ساده مطرحش کردید و درک کردم که کاربرد Props چیه
عالی توضیح میدین سلیس و روان
کاش آموزش های جاوا اسکریپت یا next js یا مفاهیم پیچیده تر ری اکت رو هم بذارید
سلام و درود
خیلی ممنونم بابت نظر قشنگتون و فیدبک ارزشمندتون که کمک میکنه محتواهای بهتری داخل فرانت اندی قرار بدیم.
حتما سراغ مباحث Next.js و JS هم میریم تا خیلی آسون یاد بگیریمشون 🙂
سلام خیلی عالی توضیح دادین…❤️
سلام مصطفی جان خیلی خوشحالم که برات مفید واقع شده 🙂
موفق باشی
خيلي خوب توضيح داديد واقعا ممنون🙏🏻
سلام خوشحالم که برات مفید واقع شده و ممنون از نظری که گذاشتی 🙂
موفق باشی 🙂
مفید بود
سلام و درود
ممنون از توجهتون 🙂 موفق باشید
عالی بود
سلام و درود
خوشحالم که براتون مفید واقع شده 🙂
موفق باشید
با سلام و احترام
باتشکر از زحماتتون و مطالبی که آموزش دادین.
توی قسمت Destructure کردن Props ، یه قطعه کد قرار دادین و نوشتین که اشتباه هست.
function Product = ({ img, title, description,price}) => { codes}
اگه می خواین که اون مساوی باشه و تابع رو تو یه متغیر بذارین ، باید از const بجای function استفاده کنید.
اگر هم میخواین که از fuction استفاده کنید، اون = و <= رو باید بردارید.
باتشکر فراوان
سلام امیرمحمد جان آقا خیلی خیلی دمت گرم و ممنون بابت ریزبینی که داشتی 🙂
کاملا درست میگی و ظاهرا این بخش از کد از دستم در رفته بوده 🙂
من مجدد کد رو ویرایش کردم و الان دیگه مشکلی نداره.
بازم ممنون که این مشکل رو اطلاع دادی ❤️🌱
چقدرررررررررر خوب بود… واسه چیزای دیگه هم مستقیم میام سراغ سایتت
خیلی مرسی
سلام فرزانه جان مرررسی بابت انرژی مثبت و نظر لطفت 🙂
خیلی خیلی خوشحالم که مقالات آموزشی برات مفید واقع شدن 🙂
فقط می‌تونم بگم خدا خیرتون بده، بعد از خرید پکیج‌های پولی و کلی فیلم تو یوتیوب و بازدید از خود سایت ریکت، تو سایت شما کامل برام جا افتاد🙏
سلام عرفان جان، قربانت 🙂 خیلی خیلی خوشحالم که مقالات برات مفید بودن و مررررسی از انرژی مثبتی که دادی بهم 🙂