Props در ری اکت چیست و چطور باید از Props استفاده کنیم ؟

در واقع Props در ری اکت یکی از مهمترین مفاهیمی هست که هر React Deverloper باید درک صحیح و عمیقی ازش داشته باشه. در حقیقت Props در React یکی از اولین مفاهیمی هست که ما به عنوان توسعه دهنده ری اکت باید یادش بگیریم.

تو این مقاله میخوایم یکبار برای همیشه Props در ری اکت رو بررسی کنیم ?

قابلیت Props در ری اکت چیست ؟

میشه اینطور گفت که Props در React برای انتقال یک دیتا از کامپوننت پدر به کامپوننت فرزند کاربرد داره !

در حقیقت Props ها ورودی کامپوننت ها هستن ! به کمک Props در React میتونیم به کامپوننت های خودمون ورودی بدیم.

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

ویژگی Props در ری اکت معادل آرگومان ورودی توابع در جاوااسکریپت هستن!

پراپس ها به کامپوننت ها این اجازه رو میدن که مقادیر داینامیک و سفارشی داشته باشن. ( محتوا و خروجیشون استاتیک و ثابت نباشه )

برای اینکه کاربرد Props در React رو بتونیم متوجه بشیم بیاید یه نگاه عملی به Props داشته باشیم ..

تو تیکه کد زیر که کامپوننت پدر هست، ما یک کامپوننت به اسم Product فراخوانی کردیم.

import Product from &quot./Product&quot

function App() {

  return (

      <div>

      	<h1>محصولات ما</h1>

      	<div className=&quotApp&quot>

      		<Product />

      	</div>

      </div>  )}

export default App

تو خط 8 تیکه کد بالا، یک کامپوننت به اسم Product فراخوانی کردیم. تو تیکه کد زیر میتونید این کامپوننت رو ببینید :

function Product() {

    return (

      <div>

        <image src=&quot/Pofak.png&quot />

        <h4>پفک اشی مشی</h4>

        <p>تازه و خوشمزه</p>

        <h4>100 تومن</h4>

      </div>

    );

}

export default Product

در واقع کامپوننت product یک محصول هست که شامل عنوان محصول، تصویر، توضیحات و قیمت محصول هست.

خروجی کامپوننت بالا بصورت زیر هست :

حالا اگه بخوایم 3 بار این کامپوننت رو render کنیم و در صفحه نمایش بدیم،  باید کامپوننت Product رو 3 مرتبه فراخوانی کنیم :

import Product from &quot./Product&quot

function App() {
  return (
      <div>
      	<div className=&quotApp&quot>
      		<Product />
      	    <Product />
      		<Product />

      	</div>
      </div>
  )
}

export default App

خروجی کد بالا :

نکته ای که وجود داره این هست که ما برای نمایش 3 محصول ، این کامپوننت رو 3 بار ننوشتیم !
یکبار کامپوننت Product رو نوشتیم و 3 بار فراخوانیش کردیم .  حتی اگه قصد نمایش 100 محصول هم داشته باشیم، کافیه کامپوننت Product رو یک بار بنویسیم و صد مرتبه فراخوانی کنیم.
کد بالا به خوبی کار میکنه اما این کافی نیست ! چون ما نمیخوایم محصولاتی رو به کاربر نشون بدیم که عکس یکسان ، عنوان یکسان ، توضیحات و قیمت یکسان داشته باشن !!!

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

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

چطور از Props در ری اکت استفاده کنیم ؟

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

اگه با HTML آشنا باشین، میدونید که ما میتونیم به تگ های HTML ، خصوصیت ( Attribute ) پاس بدیم. مثل :

<input type=&quotpassword&quot placeholder=&quotپسوردت رو وارد کن&quot />

تو مثال بالا ما به تگ Input در Html ، چندین خصوصیت دادیم.

دقیقا مثل تیکه کد بالا ، ما به کامپوننت ها در React میتونیم Props پاس بدیم. مثل مثال زیر :

تو تیکه کد بالا ، ما به کامپوننت Product چندین Props پاس دادیم ( عنوان ، توضیحات ، تصویر و قیمت )

پس یعنی ما باید کامپوننت Product رو بجای حالت قبلی که 3 بار فراخوانی کردیم و 3 محصول مشابه بهمون نمایش داد ، اینجوری فراخوانی کنیم :

import Product from &quot./Product&quot

function App() {
  return (
    <div>
      <h1>محصولات</h1>
      <div className=&quotApp&quot>
        <Product title=&quotپفک اشی مشی&quot
        description=&quotتازه و خوشمزه&quot
        price=&quot100 تومن&quot
        img=&quotpofak.png&quot/>
      </div>
    </div>
  );
}

export default App;

تو تیکه کد بالا ، تونستیم هنگام فراخوانی کامپوننت Product بهش اطلاعات مختص خودش رو پاس بدیم. ( بهش props دادیم )

حالا برای اینکه از این Props ها بتونیم در کامپوننت Product استفاده کنیم، باید وارد کامپوننت Products بشیم و مقادیر استاتیک رو با مقادیر داینامیک ( خود Props ) جایگزین کنیم . در واقع باید به Props های پاس داده شده در کامپوننت Product دسترسی پیدا کنیم.

تو ادامه ی مقاله از Props تو کامپوننت خودمون استفاده میکنیم. لطفا برای مطالعه ادامه ی مقاله روی لینک زیر کلیک کنید :

‫‫Props در ری اکت

‫‫