پراپس دقیقا چیه و چیکار میکنه ؟

در فریم ورک های جاوا اسکریپت وقتی داریم کامپوننت هارو میسازیم برای اینکه بتونیم کامپوننت هارو داینامیک کنیم یا به عبارت دیگر کامپوننت به گونه ای تعریف شود که بتونیم از اون بارها و بارها استفاده کنیم تا مجبور به نوشتن کدهای تکراری نباشیم باید از props استفاده کنیم. props میتونه هر نوع داده ای باشه string , boolean , array , object یا حتی function باشه.

در ری اکت اکثر اوقات نیازه یک سری دیتا هارو  از کامپوننت والد به کامپوننت فرزند ارسال کنیم ، که برای اینکار از پراپس استفاده میکنیم  خب طریقه ارسال به این صورت است :

const Parent = () => {
	const name = 'tarhche'
	return (
		<child name={name} />
	)
}
export default Parent

در مثال بالا ما برای اینکه دیتا رو ارسال کنیم از پراپرتی name به عنوان key و از متغییر name به عنوان value یا دیتایی قرار است ارسال شود استفاده کردیم .
حالا میتونیم بریم در کامپوننت فرزند و در داخل کامپوننت props ارسالی رو دریافت کنیم :
 

const Child = (props) => {
	console.log(props.name)
	return (
	 <p>you are on the {props.name} website.</p>
	)
}
export default Child

استفاده از props با destructuring

برای  دریافت props ارسال شده ما باید آبجکت props رو به عنوان پارامتر قرار بدیم حالا میتونیم از درون آبجکت  props به دیتای ارسالی که همون name هست دسترسی پیدا کنیم که البته میتونیم به جای نوشتن props از قابلیت destructuring در جاوا اسکریپت استفاده کنیم و کد رو به صورت زیر  ساده تر کنیم : 
 

const Child = ({name}) => {
	console.log(name)
	return (
	 <p>you are on the {name} website.<p>
	)
}
export default Child

 جمع بندی 

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

props باعث میشه که یک کامپوننت در شرایط مختلف رفتار مختلفی داشته باشه که به عنوان مثال میتونیم به کارت های محصول در سبد خرید  اشاره کرد که هر کدوم محتوای خاص خودشون رو دارند