2. آشنایی با Props در React

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

در ابتدا من یه تغییراتی در پست قبل دادم و تمام متن هایی که میخوایم نمایش داده بشه رو به کامپوننت Wellcome انتقال دادم و دو کامپونتت دیگر رو که استفاده ای ازشون نشده بود رو حذف کردم.

import {Wellcome} from &quot./Components/Wellcome&quot
function App() {
return ( <Wellcome/> ) ; }
export default App;  //11

و فایل Wellcome هم به شکل زیر:

export function Wellcome() {
     return(
                  <div> 
                       <h1> Hello My Friend </h1> 
                       <p>Wellcome to my WebSite</p> 
                 </div> ) ; } //12

خب حالا می خوایم به جای My Friend از اسم کاربر استفاده کنیم. اول کدهاش رو ببینیم ، بعد توضیحش میدم:

import {Wellcome} from &quot./Components/Wellcome&quot
function App() {
return ( <div>
             <Wellcome fName=&quotAli&quot lName=&quotMoradi&quot />
             <Wellcome fName=&quotAhmad&quot lName=&quotKarimi&quot />
              </div> ) ; }

export default App;  //12

export function Wellcome(props) {
return( <div>
              <h1> Hello {props.fName} {props.lName}</h1>
                <p>Wellcome to my WebSite</p>
               </div> )
 ; }  //13

در فایل اول props ها رو تعریف و مقداردهی میکنیم. دوبار از کامپوننت ولکام استفاده شده است. پراپز های fName و lName برای هر کامپوننت تعریف شده(این کار داخل تگ در هنگام فراخوانی کامپوننت انجام می شود). به این ترتیب تمام متغییرهایی که دارید به عنوان پراپز ارسال می کنید در کامپوننت از طریق شی پراپز قابل دریافت خواهند بود.

تا اینجا متغییر رو به عنوان پراپز ارسال کردیم به کامپوننت ، حالا میخوایم یک تابع رو به عنوان پراپز ارسال کنیم ، اول خود تابع رو در فایل App تعریف می کنیم:

function clickHandler(){
return ( alert ( &quot you have cliked&quot) ); } //14

یه تابع ساده تعریف می کنیم که یک آلارم رو بهمون نمایش بده. حالا برای ارسال این تابع به کامپوننت شبیه به ارسال متغییرهای معمولی عمل میکنیم ، با این تفاوت که باید به شکل Arrow Function ارسال بشه.

function App() {
 return ( <div>
                     <Wellcome fName=&quotAli&quot lName=&quotMoradi&quot handler= { ( ) => clickHandler() } />
                    <Wellcome fName=&quotAhmad&quot lName=&quotKarimi&quot handler= { () => clickHandler() }  />
            </div> ) ; } //15

اسمش پراپز رو گذاشتیم Handler و این ساختاری که استفاده کردیم رو فعلا حفظ کنید. خب بریم سراغ کامپوننت و ببینیم چطوری باید از این تابعی که ارسال کردیم استفاده کنیم:

export function Wellcome(props) { 
return( <div>
                  <h1 ={props.handler}> Hello {props.fName} {props.lName}</h1>
                  <p> Wellcome to my WebSite</p>
            </div> ) ; } /16

برای تگ h1 یک ویژگی وجود داره به اسم . کلیک کردن در واقع یه event هست. و برای تعریف کردن event handler مربوط به کلیک استفاده می شود. همین جا یه کوچولو درباره event و event handler ها صحبت کنیم:

خیلی ساده بخوام توضیح بدم ، event اتفاق هایی هست که ممکنه در صفحه وب و برای یک المنت رخ بده. مثلا کلیک کردن روی اون المنت ، مثلا قرار گرفتن موس روی المنت ، مثلا تغییر محتویات یک تکست باکس و... این event ها برای سیستم تعریف شده از قبل . یه چیز دیگه داریم به اسم event Handler ، یعنی وقتی فلان اتفاق رخ داد ، در جواب میخوای چه اتفاقی بیفته؟مثلا وقتی روی این متن کلیک شد( وقتی event کلیک رخ داد) ، میخوام یک آلارم نمایش داده بشه( این event handler کلیک کردن هست)

خب ما تو خط چهارم از برنامه 16 داریم چی میگیم؟ میگم اگر روی تگ h1 کلیک شد من میخوام تابع handler (که به صورت پراپز به این کامپوننت ارسال شده ) اجرا بشه.

در این مرحله میتونید برنامه رو اجرا کنید .

بریم قلق آخر ارسال تابع رو هم یاد بگیریم و دیگه این جلسه رو تمام کنیم. شما یک تابع ارسال کردید ولی روی هر کدوم از h1 ها که کلیک بشه یه آلارم نمایش داده میشه. میخوایم متن آلارمی که نمایش داده میشه برای هر تگ فرق کنه. پس لازمه برای خود تابع clickHandler یک متغییر ورودی تعریف کنیم و از اون برای نمایش متن استفاده کنیم.

function clickHandler(user){ return (
     alert(&quotyou have cliked on &quot + user) ) ; 
} //17

پس برای تابعمون یک پارامتر user تعریف کردیم ، پس در هنگام فراخوانی لازم هست براش مقدار user رو با آرگومانش بفرستیم. در متن آلارم هم از پارامتر user استفاده کردیم.

function App() { 
return ( <div>
                <Wellcome fName=&quotAli&quot lName=&quotMoradi&quot handler={()=>clickHandler(&quotAli&quot)}/
                 <Wellcome fName=&quotAhmad&quot lName=&quotKarimi&quot handler={()=>clickHandler(&quotAhmad&quot)}/
             </div> ) ; 
} //18

برای امروز کافیه. دوتا مطلب رو دنبال کردیم. چطوری یک سری اطلاعات رو به صورت متغییر ارسال کنیم به کامپوننت ها. و اینکه چطوری یک تابع رو به عنوان پراپز ارسال کنیم. همچنین اولین event handler هم نوشته ایم. درآینده با event های بیشتر و handler های پیچیده تر آشنا می شیم.

تعطیلات خوبی داشته باشید :)

راستی یه نکته یادم رفت : پراپز ها اطلاعاتی هستند که به کامپوننت ارسال می شوند و کامپوننت فقط از اون ها استفاده میکنه و نمی تواند تغییری در آن ها ایجاد کند. حالا اگر خواستیم تغییرش بدیم چی؟ باید به جای props از state ها استفاده کنیم که درس های آیندمون هست.

پیگیرم هستی؟