Function Components و Props

Function Componentها و ارسال داده با Props

تا اینجا با نحوه نوشتن JSX و استفاده از Expression در آن آشنا شدیم. اما یک کامپوننت واقعی در React چگونه تعریف می‌شود و چطور می‌توان به آن داده منتقل کرد؟ پاسخ این دو سؤال، موضوع این درس است: Function Component و Props.

Function Component چیست

در React مدرن، یک کامپوننت چیزی بیش از یک تابع جاوااسکریپت معمولی نیست؛ با یک تفاوت مهم: این تابع باید JSX بازگرداند (یا مقداری که React بتواند آن را رندر کند، مانند رشته، عدد، یا null).

function Greeting() {
  return <h2>سلام، خوش آمدید</h2>;
}

دو قانون ساده برای Function Component وجود دارد:

• نام تابع باید با حرف بزرگ شروع شود (مثلاً Greeting، نه greeting)؛ این قانون به React کمک می‌کند تا کامپوننت‌ها را از عناصر معمولی HTML مانند div یا span تشخیص دهد.
• تابع باید یک مقدار قابل رندر بازگرداند.

برای استفاده از این کامپوننت در جایی دیگر، آن را مانند یک تگ HTML می‌نویسیم:

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

مشکل: کامپوننت‌های ثابت کاربرد محدودی دارند

کامپوننت Greeting که بالاتر نوشتیم، همیشه دقیقاً همان متن ثابت را نمایش می‌دهد. اما در عمل معمولاً می‌خواهیم یک کامپوننت را با داده‌های مختلف، در جاهای مختلف برنامه استفاده کنیم؛ مثلاً یک کامپوننت کارت محصول که باید برای محصولات مختلف، نام و قیمت متفاوتی نشان دهد.

Props: ورودی کامپوننت

Props (مخفف Properties) روشی است که از طریق آن داده از یک کامپوننت به کامپوننت دیگر منتقل می‌شود. Props را می‌توان مشابه پارامترهای یک تابع در نظر گرفت: همان‌طور که یک تابع معمولی پارامتر دریافت می‌کند تا رفتار متفاوتی داشته باشد، یک کامپوننت هم Props دریافت می‌کند تا خروجی متفاوتی تولید کند.

function Greeting(props) {
  return <h2>سلام، {props.name}</h2>;
}

برای ارسال مقدار به این Prop، هنگام استفاده از کامپوننت آن را مانند یک ویژگی HTML می‌نویسیم:

function App() {
  return (
    <div>
      <Greeting name="سارا" />
      <Greeting name="علی" />
    </div>
  );
}

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

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

نکته بسیار مهمی که باید از همین ابتدا بدانیم این است که یک کامپوننت هرگز نباید مقدار Propsهای دریافتی خودش را تغییر دهد. Props را باید همیشه فقط‌خواندنی (Read-only) در نظر گرفت. اگر کامپوننتی نیاز به داده‌ای دارد که باید در طول زمان تغییر کند، آن نوع داده را باید با ابزار دیگری به نام State مدیریت کرد، که موضوع فصل بعدی است.

Destructuring برای خوانایی بهتر

به‌جای نوشتن props.name در همه‌جای کامپوننت، رایج‌تر این است که با Destructuring، مقادیر موردنیاز را مستقیماً از آبجکت Props استخراج کنیم:

function Greeting({ name }) {
  return <h2>سلام، {name}</h2>;
}

این روش کد را کوتاه‌تر و خواناتر می‌کند، به‌ویژه وقتی یک کامپوننت چندین Prop مختلف دریافت می‌کند.

مثال قابل اجرا

function ProductCard({ title, price }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>قیمت: {price} تومان</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <ProductCard title="کیبورد مکانیکی" price={850000} />
      <ProductCard title="ماوس بی‌سیم" price={320000} />
    </div>
  );
}

جمع‌بندی

یک Function Component در React، یک تابع جاوااسکریپتی است که JSX بازمی‌گرداند. Props روشی است که از طریق آن، داده از بیرون به کامپوننت منتقل می‌شود و باعث می‌شود بتوان یک کامپوننت را با خروجی‌های متفاوت، بارها استفاده کرد. مهم است به یاد داشته باشیم که Props همیشه فقط‌خواندنی هستند. در درس بعدی به سراغ Children، یعنی نوع خاصی از Prop که برای قرار دادن محتوا داخل یک کامپوننت استفاده می‌شود، می‌رویم.