استفاده از props و ارسال داده به کامپوننت‌ها

مقدمه

در درس قبل، ما یک کامپوننت Welcome ساختیم که یک پیام ثابت را نمایش می‌داد. هرچند قابلیت استفاده مجدد از آن خوب بود، اما کامپوننت ما چندان مفید نبود، زیرا همیشه یک خروجی یکسان تولید می‌کرد. قدرت واقعی کامپوننت‌ها زمانی آشکار می‌شود که بتوانیم داده‌های مختلفی را به آنها ارسال کرده و رفتار و خروجی آنها را بر اساس آن داده‌ها سفارشی کنیم.

این کار در React با استفاده از «پراپ‌ها» یا Props انجام می‌شود. props (مخفف properties) به ما اجازه می‌دهد تا داده‌ها را از یک کامپوننت والد به یک کامپوننت فرزند منتقل کنیم.

ارسال Props به یک کامپوننت

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

JAVASCRIPT (React)

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Sarah" message="Welcome back!" />
      <Greeting name="John" message="Hello there!" />
    </div>
  );
}

در این مثال، ما از کامپوننت Greeting دو بار استفاده کرده‌ایم. در هر بار، ما دو prop به نام‌های name و message را با مقادیر متفاوتی به آن ارسال می‌کنیم.

خواندن Props در کامپوننت فرزند

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

Greeting.js

function Greeting(props) {
  return (
    <div>
      <h2>{props.message}</h2>
      <p>This is a message for {props.name}.</p>
    </div>
  );
}

export default Greeting;

همانطور که می‌بینید، کامپوننت Greeting اکنون یک شیء props را به عنوان پارامتر دریافت می‌کند. در داخل JSX، ما با استفاده از آکولاد و سینتکس props.name و props.message به مقادیر ارسال شده از کامپوننت App دسترسی پیدا کرده و آنها را نمایش می‌دهیم.

الگوی Destructuring Props

یک الگوی رایج و تمیزتر برای کار با props، استفاده از destructuring جاوااسکریپت در امضای تابع است. این کار به ما اجازه می‌دهد تا به جای نوشتن مکرر props. مستقیماً به نام هر prop دسترسی داشته باشیم.

Greeting.js (with destructuring)

function Greeting({ name, message }) {
  return (
    <div>
      <h2>{message}</h2>
      <p>This is a message for {name}.</p>
    </div>
  );
}

این نسخه از کد دقیقاً همان کار قبلی را انجام می‌دهد، اما خواناتر و مختصرتر است.

propsها فقط خواندنی هستند

یک قانون بسیار مهم در React این است که propsها «تغییرناپذیر» (immutable) هستند. یک کامپوننت هرگز نباید propsهای دریافتی خود را مستقیماً تغییر دهد. تمام کامپوننت‌های React باید مانند «توابع خالص» (pure functions) عمل کنند؛ یعنی با ورودی‌های یکسان، همیشه خروجی یکسانی تولید کنند و هیچ عارضه جانبی (side effect) نداشته باشند.

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

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