در ری اکت چگونه پراپ (پراپس یا پراپز) را در کامپوننت دریافت میکنیم؟

یا چگونه prop را به کامپوننت پاس pass میدهیم (میفرستیم)؟ری اکت کتابخانه محبوب جاوا اسکریپت است. پراپ به شما کمک میکند یک کامپوننت قابلیت استفاده مجدد بالایی داشته باشد.یک جواب سریع کدنویسی شده برای پرسش بالا این است: function Navbar(props) { return ( <header> ... </header> ) }تصور کنید، یک کامپوننت را بدون مقدارهای اولیه ایجاد کرده اید. سپس در جایی دیگر مقادیر را بنا بر نیاز در کامپوننت دیگر فراخوانی میکنید.تصور کنید میخواهید یک دفترچه تماس ایجاد کنید. اگر بخواهید یک کامپوننت بسازید که در بردارنده شماره های تلفن و مشخصات هر شخص یا شرکت باشد، کامپوننت تماس شما دربردارنده اطلاعات غیرضروری بسیاری خواهد بود. در عوض به جای وارد کردن اطلاعات هر تماس(نام، تلفن، ایمیل، تصویر) یک کامپوننت ایجاد میکنید که برای نمایش هر کدام از خصوصیات نام، تلفن، ایمیل و تصویر باشد. سپس با استفاده از فراخوانی از جای دیگر بنا به ضرورت اطلاعات درون این فیلدها فراخوانی شده و نمایش داده میشوند.به صورت خلاصه هنگام کد نویسی، در کامپوننتی که میخواهیم پراپ ها را دریافت کنیم، داخل پرانتز در جلوی نام کامپوننت مینویسیم: props سپس در بدنه هر خط از تابع کامپوننت اینگونه آنها را فراخوانی میکنیم:{props.name} {props.phone} {props.email} {props.img}در زیر کدهای مربوطه نوشته میشوند و سپس دوباره توضیحاتی درباره پراپ ها داده میشود. ابتدا تصور کنید کامپوننت App قرار است، اطلاعاتی را در قالب پراپ prop به کامپوننت دیگری به نام Contact پاس بدهد یا بفرستد.کدهای کامپوننت App:import React from &quotreact&quot import Contact from &quot./Contact&quot function App() { return ( <div className=&quotcontacts&quot> <Contact img=&quot./images/mr-whiskerson.png&quot name=&quotMr. Whiskerson&quot phone=&quot(930) 555-1234&quot email=&quotmr.whiskaz@gmail.com&quot /> <Contact img=&quot./images/fluffykins.png&quot name=&quotFluffykins&quot phone=&quot(936) 555-2345&quot email=&quotfluff@me.com&quot /> <Contact img=&quot./images/felix.png&quot name=&quotFelix&quot phone=&quot(912) 555-4567&quot email=&quotthecat@hotmail.com&quot /> <Contact img=&quot./images/pumpkin.png&quot name=&quotPumpkin&quot phone=&quot(0919) CAT KING&quot email=&quotpumpkin@seyedahmaddv.com&quot /> </div> ) }در بالا ما اطلاعاتی از محل قرارگیری عکس، نام، تلفن و ایمیل وارد کرده ایم. اما چگونگی نمایش (چینش و استایل) را قرار نداده ایم.کد کامپوننت Contact که پراپ ها props به این کامپوننت فرستاده یا پاس داده میشوند.import React from &quotreact&quot export default function Contact(props) { /** * در جلوی نام کامپوننت پراپس نوشته شد * مقادیر ابجکتها در زیر به وسیله پراپس و. سپس نام آن ابجکت فرستاده میشود */ return ( <div className=&quotcontact-card&quot> <img src={props.img}/> <h3>{props.name}</h3> <div className=&quotinfo-group&quot> <img src=&quot./images/phone-icon.png&quot /> <p>{props.phone}</p> </div> <div className=&quotinfo-group&quot> <img src=&quot./images/mail-icon.png&quot /> <p>{props.email}</p> </div> </div> ) }اگر هنوز با ساختار اپلیکیشن ساخته شده به وسیله ری اکت اشنا نیستید: یاداوری میکنم که قرار است کامپوننت Contact در کامپوننت App وارد شود. سپس کامپوننت App در کامپوننت اصلی به نام index.js وارد شود.توجه: اگر از Vite js برای راه اندازی پروژه استفاده میکنید، کامپوننت اصلی main.jsx است که App در آن وارد میشود.در صورت نیاز کد index.js به صورت زیر است:import React from &quotreact&quot import ReactDOM from &quotreact-dom&quot import App from &quot./App&quot ReactDOM.render(<App />, document.getElementById(&quotroot&quot))همچنین فایل index.html به صورت زیر است:<html> <head> <link rel=&quotpreconnect&quot href=&quothttps://fonts.googleapis.com&quot> <link rel=&quotpreconnect&quot href=&quothttps://fonts.gstatic.com&quot crossorigin> <link href=&quothttps://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap&quot rel=&quotstylesheet&quot> <link rel=&quotstylesheet&quot href=&quotstyle.css&quot> </head> <body> <div id=&quotroot&quot></div> <script src=&quotindex.pack.js&quot> </body> </html>اگر میخواهید نتیجه این پروژه دفترچه تماس را در نمایشگر ببینید، یک اپلیکیشن ری اکت طبق دستورات ایجاد نمایید. سپس محتویات فایلها را با فایلهای همنام که در بالا آمده جایگزین کنید.پراپ چیست؟ props in reactدر ReactJS، "پراپ" (props) به عنوان یک مکانیزم ارتباطی بین کامپوننتها وجود دارد. پراپ‌ها به عنوان ورودی‌هایی برای کامپوننتها عمل می‌کنند که با استفاده از آن‌ها می‌توانند داده‌هایی را که در طراحی و نمایش کامپوننتها نیاز است، به کامپوننت ارسال کنند.در واقع، پراپ‌ها می‌توانند به صورت ابجکت ها یا مقادیری از انواع داده‌ها باشند. این داده‌ها می‌توانند شامل مقادیر boolean، اعداد، رشته‌ها string، آرایه‌ها array، شیء‌ object و حتی توابع function باشند. هر کامپوننت می‌تواند به دلخواه یک یا چند پراپ prop داشته باشد، و این پراپ‌ها در داخل کامپوننت با استفاده از ویژگی props در دسترس قرار می‌گیرند. برای مثال، یک مولفه‌ی Contact می‌تواند یک پراپ به نام "phone" داشته باشد، که مقدار متنی متناظر با دفترچه تماس را به عنوان ورودی به کامپوننت ارائه می‌کند. استفاده از پراپ‌ها در ReactJS باعث می‌شود که خوانایی، نگهداری‌ و قابلیت استفاده مجدد کد بیشتر شود. به عنوان مثال، می‌توانید یک کامپوننت Contact را با توجه به استفاده‌های مختلف آن، با استفاده از پراپ‌ها و با تعیین مقادیر متفاوت برای هر پراپ، چندین بار استفاده کنید.