پروپرتیها (Props) در React
در React، Props (مخفف Properties) مکانیزمی برای انتقال دادهها از یک کامپوننت والد به کامپوننت فرزند هستند. آنها فقط خواندنی (Read-Only) هستند و کامپوننتهای فرزند نمیتوانند مقدار آنها را تغییر دهند.
روش استفاده از Props در کامپوننتهای فانکشنی
در کامپوننتهای فانکشنی، Props بهعنوان پارامتر ورودی به تابع پاس داده میشوند.
مثال:
return (
<div>
<h1>سلام، {name}!</h1>
<p>سن شما: {age}</p>
</div>
);
};
// استفاده از کامپوننت با مقداردهی به Props
const App = () => {
return <Greeting name="علی" age={25} />;
};
export default App;
✔ در این مثال، مقدار name="علی"
و age={25}
از کامپوننت App
(والد) به کامپوننت Greeting
(فرزند) ارسال میشود.
روش استفاده از Props در کامپوننتهای کلاسی
در کامپوننتهای کلاسی، Props از طریق this.props
در render()
در دسترس هستند.
مثال:
class Greeting extends Component {
render() {
return (
<div>
<h1>سلام، {this.props.name}!</h1>
<p>سن شما: {this.props.age}</p>
</div>
);
}
}
const App = () => {
return <Greeting name="زهرا" age={30} />;
};
export default App;
در اینجا this.props.name
و this.props.age
برای دسترسی به مقادیر name
و age
استفاده شدهاند.
ارسال مقادیر پیشفرض به Props
اگر مقدار Props تعیین نشود، میتوان از مقدار پیشفرض (Default Props) استفاده کرد.
برای کامپوننتهای فانکشنی:
return (
<div>
<h1>سلام، {name}!</h1>
<p>سن شما: {age}</p>
</div>
);
};
برای کامپوننتهای کلاسی:
static defaultProps = {
name: "مهمان",
age: 18,
};
render() {
return (
<div>
<h1>سلام، {this.props.name}!</h1>
<p>سن شما: {this.props.age}</p>
</div>
);
}
}
حالا اگر name
یا age
مقدار نداشته باشند، مقدار پیشفرض نمایش داده میشود.
ارسال Props به کامپوننتهای فرزند
گاهی نیاز داریم که Props را از یک کامپوننت والد به چند کامپوننت فرزند ارسال کنیم.
مثال:
const user = { name: "محمد", age: 28 };
return <Child {...user} />;
};
const Child = ({ name, age }) => {
return (
<div>
<h1>سلام، {name}!</h1>
<p>سن شما: {age}</p>
</div>
);
};
export default Parent;
در اینجا از Spread Operator (...user
) برای ارسال همهی Props استفاده شده است.
نکات مهم درباره Props
- Props فقط خواندنی (Immutable) هستند و نباید در داخل کامپوننت مقدارشان را تغییر دهیم.
- برای ارسال مقادیر پویا از
{}
استفاده میشود، مثل{age={user.age}}
. - میتوان تابع را بهعنوان Prop ارسال کرد تا دادهها از فرزند به والد ارسال شوند.
جمعبندی:
- Props برای انتقال دادهها از والد به فرزند استفاده میشوند.
- در فانکشنال کامپوننتها، بهصورت پارامتر تابع و در کلاس کامپوننتها، با
this.props
قابل دسترسی هستند. - مقدار پیشفرض برای جلوگیری از
undefined
شدن استفاده میشود. - میتوان توابع را بهعنوان Props ارسال کرد تا ارتباط بین کامپوننتها برقرار شود.
