Props یک مفهوم مهم در React است که حتما باید درک درستی از آن داشته باشیم. ما از props برای انتقال داده‌ها و مقادیر از یک کامپوننت به کامپوننت دیگر استفاده می‌کنیم تا خروجی‌های داینامیک و منحصربه‌فردی را به دست بیاوریم.

وب‌سایت‌هایی که با React ساخته شده‌اند مانند فیس بوک، توییتر و نتفلیکس از الگوهای طراحی یکسانی در بسیاری از بخش‌ها استفاده می‌کنند که فقط داده‌های متفاوتی دارند. یکی از اصلی‌ترین راه‌هایی که توسعه‌دهندگان می‌توانند به این قابلیت دست پیدا کنند، استفاده از props است.

در این مقاله قصد داریم تا بیشتر با مفهوم props در React و همینطور سینتکس آن آشنا شویم. در ادامه هم برای این که دانشی که کسب کردیم را تقویت کنیم قصد داریم تا بخشی از یک سایت فروشگاهی را باهم بسازیم که اطلاعات مربوط به محصولات مختلف را به کاربران نمایش می‌دهد.

منظور از Props در React چیست؟

Props در React ورودی‌هایی هستند که ما به کامپوننت‌ها ارسال می‌کنیم. props کامپوننت‌ها را قادر می‌سازد تا به داده‌ها، مقادیر و اطلاعاتی که ورودی‌ها در خود نگه می‌دارند دسترسی پیدا کنند.

اصطلاح props مخفف properties است که به ویژگی‌های یک آبجکت اشاره دارد.

مفهوم props بر روی کامپوننت‌ها بنا شده است، بنابراین ما نمی‌توانیم بدون داشتن کامپوننت با props کار کنیم.

در ادامه کامپوننت‌هایی که در این مقاله با آن‌ها کار خواهیم کرد را می‌سازیم و به هم متصل می‌کنیم. ساختار کامپوننت parent به صورت زیر است:

import Product from "./Product"

function App() {
  return (
      <div>
      	<h1>PRODUCTS</h1>
      	<div className="App">
      		<Product />
      	</div>
      </div>
  )
}

export default App

در ادامه ساختار کامپوننت child را داریم:

function Product() {
    return (
      <div>
        <img src="https://ng.jumia.is/unsafe/fit-in/300x300/filters:fill(white)/product/82/6142201/1.jpg?2933" alt="sneakers" />
        <h4>Cyxus</h4>
        <p>Non-Slip Fitness Leisure Running Sneakers</p>
        <h4>$29</h4>
      </div>
    );
}

export default Product

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

البته، تنها با رندر کردن مجدد کامپوننت، می‌توانیم هر چند بار که می‌خواهیم از کامپوننت product استفاده کنیم. مثلا:

import Product from "./Product"

function App() {
  return (
    <div className="App">
      <Product />
      <Product />
      <Product />
    </div>
  )
}

export default App

ما می‌توانیم فانکشنالیتی React را برای تکرار یک طراحی خاص بدون نوشتن کد زیاد، در قطعه کد بالا مشاهده کنیم.

اما هنوز به هدف خود دست پیدا نکرده‌ایم. زیرا ما می‌خواهیم تا از یک کامپوننت بتوانیم استفاده مجدد داشته باشیم، همچنین قصد داریم تا نام محصول، قیمت، توضیحات و تصویر را بدون نیاز به hard coding هیچ داده‌ای در کامپوننت Product.js به‌روزرسانی نماییم.

اینجاست که می‌توانیم از props در React استفاده کنیم تا خروجی داده‌هایی که داریم داینامیک باشد.

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

قبل از اینکه در این مفهوم عمیق‌تر شویم، مهم است به این موضوع توجه داشته باشیم که React از یک جریان داده‌ای یک طرفه استفاده می‌کند. این بدان معنی است که داده‌ها فقط می‌توانند از کامپوننت parent به کامپوننت‌های child منتقل شوند. همچنین، داده‌های ارسال شده از کامپوننت parent را نمی‌توانیم توسط کامپوننت child تغییر دهیم.

این بدان معناست که داده‌های ما از App.js که کامپوننت parent است، به Product.js که کامپوننت child است منتقل می‌شود و هرگز برعکس این اتفاق صورت نمی‌گیرد.

چگونه می‌توانیم props را به یک کامپوننت ارسال کنیم؟

نحوه ارسال props به یک کامپوننت، مشابه نحوه عملکرد attributeها در المنت‌های HTML است. به عنوان مثال، هنگامی که می‌خواهیم ویژگی‌ها را به یک المنت ورودی در HTML ارسال کنیم، attribute را می‌نویسیم و مقدار ویژگی را به آن تخصیص می‌دهیم، به عنوان مثال:

<input type="text" placeholder="Cyxus" />

به همین صورت، هنگام ارسال props، که property نیز هستند، می‌توانیم آن‌ها را به attributeها تشبیه کنیم و مقادیر مورد نظر خود را به آن‌ها اختصاص دهیم. سینتکس آن به صورت زیر است:

<ComponentName property1="value" property2="value" property3="value" />

در تگ component، پس از نوشتن نام کامپوننت، یک مقدار به هر ویژگی اختصاص می‌دهیم.

اکنون قصد داریم تا از سینتکس بالا برای انتقال داده به کامپوننت App.js استفاده کنیم:

<Product
  img="https://ng.jumia.is/unsafe/fitin/300x300/filters:fill(white)/product/82/6142201/1.jpg?2933"
  name="Cyxus"
  desc="Non-Slip Fitness Leisure Running Sneakers"
  price="$29"
/>

در کد بالا، نام کامپوننت داخل تگ Product است و اولین ویژگی یا prop آن img می‌باشد که مقدار https://m.media amazon.com/images/W/WEBP_402378T1/images/I/71TR1WrqqJL.AC_UL320.jpg را به آن اختصاص داده‌ایم. پس از آن name را داریم که ویژگی دوم است و سپس desc که ویژگی سوم می‌باشد و مقادیری را به آن‌ها هم تخصیص داده‌ایم.

وقتی کامپوننت App.js را به درستی ساختاربندی می‌کنیم، اکنون به شکل زیر در می‌آید:

import Product from "./Product";

function App() {
  return (
    <div>
      <h1>PRODUCTS</h1>
      <div className="App">
        <Product
          img="https://ng.jumia.is/unsafe/fit-in/300x300/filters:fill(white)/product/82/6142201/1.jpg?2933"
          name="Cyxus"
          desc="Non-Slip Fitness Leisure Running Sneakers"
          price="$29"
        />
      </div>
    </div>
  );
}

export default App;

تفاوت جزئی که بین نوشتن ویژگی‌های HTML و ارسال در props وجود دارد این است که ویژگی‌های HTML کلمات کلیدی خاصی هستند که قبلاً برای ما ارائه شده‌اند، اما ما props را در React سفارشی‌سازی کرده و تعریف می‌نماییم.

به عنوان مثال، ما در کد بالا ویژگی‌های 'img'، 'name'، 'desc' و 'price' را تعریف کردیم. سپس، مقادیر props را به آن‌ها اضافه نمودیم.

چگونه می‌توانیم در React به props دسترسی داشته باشیم و از آن‌ها استفاده کنیم؟

کامپوننت، props را به عنوان پارامتر تابع دریافت می‌کند. سپس با تعریف پارامتر به عنوان آبجکت‌های props از مقدار props استفاده می‌نماید. سینتکس آن به صورت زیر می‌باشد:

//the function receives 'props' as a parameter function
function Product(props) {
    return (
      <div>
//it uses the value of props by defining the parameter as props objects
        <img src={props.objectName} alt="products" />
        <h4>{props.objectName}</h4>
        <p>{props.objectName}</p>
        <h4>{props.objectName}</h4>
      </div>
    );
}

export default Product

اکنون قصد داریم تا با دریافت props به عنوان تابع پارامتر و با تعریف props به عنوان آبجکت، سینتکس بالا را در Product.js که داشتیم مورد استفاده قرار دهیم:

//the function receives 'props' as a parameter function
function Product(props) {
    return (
      <div>
//it uses the value of props by defining the parameter as props objects
        <img src={props.img} alt="products" />
        <h4>{props.name}</h4>
        <p>{props.description}</p>
        <h4>{props.price}</h4>
      </div>
    );
}

export default Product

اکنون ما با موفقیت توانستیم داده‌هایی را که به کامپوننت Product.js منتقل کرده‌ایم، داینامیک کنیم.

برای استفاده مجدد از کامپوننت Product.js برای نمایش داده‌های محصولات دیگر، تنها کاری که باید انجام دهیم این است که داده‌ها یا مقادیر جدید را هنگام رندر مجدد کامپوننت به آن اضافه نماییم. سینتکس آن به شکل زیر می‌باشد:

<ComponentName property1="valueA" property2="valueB" property3="valueC" />
<ComponentName property1="valueD" property2="valueE" property3="valueF" />
<ComponentName property1="valueG" property2="valueH" property3="valueI" />

حال سینتکس بالا را در کامپوننت App.js مورد استفاده قرار می‌دهیم:

import Product from "./Product";

function App() {
  return (
    <div>
      <h1>PRODUCTS</h1>
      <div className="App">
        <Product
          img="https://ng.jumia.is/unsafe/fit-in/300x300/filters:fill(white)/product/82/6142201/1.jpg?2933"
          name="Cyxus"
          desc="Non-Slip Fitness Leisure Running Sneakers"
          price="$29"
        />
        <Product
          img="https://ng.jumia.is/unsafe/fit-in/300x300/filters:fill(white)/product/01/241417/1.jpg?6747"
          name="Vitike"
          desc="Latest Men Sneakers -Black"
          price="$100"
        />
        <Product
          img="https://ng.jumia.is/unsafe/fit-in/300x300/filters:fill(white)/product/06/4410121/1.jpg?4437"
          name="Aomei"
          desc="Men's Trend Casual Sports Shoe"
          price="$40"
        />
      </div>
    </div>
  );
}

export default App;

اگر خروجی کد خود را مشاهده کنیم می‌بینیم که اکنون تصویر، نام و توضیحات خاص هر محصول را در صفحه نشان می‌دهد.

در این لینک نیز امکان دسترسی به کدهای مقاله وجود دارد.

چگونه می‌توانیم props در React را destruct کنیم؟

اکنون که به فانکشنالیتی مورد نظر خود دست یافته‌ایم، قصد داریم تا Product.js خود را با استفاده از destructuring قالب‌بندی کنیم. این مفهوم یکی از ویژگی‌های جاوااسکریپت است که شامل تخصیص قطعات داده از یک آبجکت یا آرایه به یک متغیر جداگانه است تا متغیر بتواند داده‌های حاصل از آرایه یا آبجکت را در خود نگه دارد.

Props آبجکت هستند. بنابراین برای destruct کردن آبجکت‌ها در React، اولین قدم این است که ویژگی‌های خود را در مجموعه‌ای از {}ها گروه‌بندی کنیم. سپس می‌توانیم آن را در متغیری به نام props در بدنه تابع ذخیره کنیم یا آن را مستقیماً به عنوان پارامتر تابع ارسال نماییم.

مرحله دوم این است که با ذکر نام ویژگی‌ها بدون پیوست کردن پیشوند props، ویژگی‌هایی را که به آن‌ها نیاز داریم، دریافت کنیم.

در ادامه نمونه‌ای از دو روشی که می‌توانیم در React با استفاده از آن‌ها عمل destruct کردن را انجام دهیم، بررسی کرده‌ایم:

function Product = (props) => {
//First Step: Destructuring within the body of the function
    const { img, name, desc, price} = props ;
    return (
      <div>
  		<img src={img} alt="products" />
//Second Step: receive the properties where you need them by stating the names of the properties without attaching the prefix ‘props.’
        <h4>{name}</h4>
        <p>{description}</p>
        <h4>{price}</h4>
      </div>
    );
}

export default Product

//First Step: Destructuring within function's parameter
function Product = ({ img, name, desc, price}) => {
    return (
      <div>
  		<img src={img} alt="products" />
//Second Step: receive the properties where you need them by stating the names of the properties without attaching the prefix ‘props.’
        <h4>{name}</h4>
        <p>{description}</p>
        <h4>{price}</h4>
      </div>
    );
}

export default Product

Destructuring در React کد ما را خواناتر و مختصرتر می‌کند. باید به این نکته توجه داشته باشیم که دو روش بالا برای انجام Destructuring در React همیشه خروجی یکسانی خواهند داشت.

جمع‌بندی

در این مقاله سعی کردیم تا نحوه عملکرد props در React را باهم بررسی کنیم و یاد بگیریم که چگونه می‌توانیم صفحات وب را با خروجی داده داینامیک بنویسیم.