پراپس ها (Props) (Props)

در React، پراپس در React راه ساده فرستادن اطلاعات است. مثل وقتی که در مدرسه برگه ای به دوستی می دهی. روی برگه اطلاعات می نویسی و او فقط می خواند، عوضش نمی کند.

آشنایی با پراپس در React

پراپس ها (Props) در React مثل ورودی تابع هستند. همین طور شبیه ویژگی های HTML مثل class یا id هستند. یعنی روی تگ کامپوننت می نویسی و داخل کامپوننت آن ها را می خوانی.

تعریف ساده: پراپس ها بسته های کوچک اطلاعات برای کامپوننت هستند. مثلاً اسم ماشین، رنگ، مدل یا سال ساخت.

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

برای فرستادن پراپس در React، روی تگ کامپوننت یک ویژگی می نویسی. دقیقاً مثل HTML. این ویژگی می شود یک پراپس. مثال ساده برای ماشین با برند:

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" />
);

مشاهده در ادیتور

اینجا Car یک کامپوننت است و brand اسم پراپس است. مقدار Ford هم می شود داده داخل این پراپس.

دریافت پراپس داخل تابع کامپوننت

کامپوننت تابعی، پراپس ها را مثل ورودی تابع می گیرد. معمولاً اسم این ورودی را props می گذاریم. بعد با نقطه به هر پراپس می رسیم.

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

مشاهده در ادیتور

در این مثال، پراپس brand روی تگ کامپوننت نوشته شده بود. حالا داخل JSX با {props.brand} نمایش داده می شود.

اسم پارامتر props مهم نیست

لازم نیست حتماً اسم ورودی را props بگذاری. هر اسمی باشد، فقط باید همان اسم را در بدنه تابع استفاده کنی.

function Car(myobj) {
  return (
    <h2>I am a {myobj.brand}!</h2>
  );
}

مشاهده در ادیتور

اینجا دیگر خبری از props نیست. اما همچنان همان داده فرستاده می شود. فقط نام متغیر ورودی عوض شده است.

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

خیلی وقت ها فقط یک پراپس کافی نیست. مثلاً برای ماشین هم برند می خواهی، هم مدل، هم رنگ. می توانی چند پراپس پشت سر هم روی تگ بنویسی.

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" model="Mustang" color="red" />
);

مشاهده در ادیتور

داخل کامپوننت، همه این ویژگی ها در یک شیء جمع می شوند. یعنی props.brand، props.model و props.color را داری.

function Car(props) {
  return (
    <h2>
      I am a {props.color} {props.brand} {props.model}!
    </h2>
  );
}

مشاهده در ادیتور

این الگو در پروژه ها خیلی تکرار می شود. هر ویژگی روی تگ، یک فیلد در شیء props خواهد بود.

انواع داده برای پراپس در React

پراپس در React می توانند از هر نوع داده باشند. رشته (String)، عدد (Number)، متغیر (Variable)، شیء (Object)، آرایه (Array) و حتی تابع. مهم این است که درست داخل JSX بنویسی.

نکته: رشته ها را با کوتیشن می نویسیم. اما عدد، متغیر، شیء و آرایه باید داخل آکولاد {} باشند.

ارسال عدد به عنوان پراپس

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

createRoot(document.getElementById("root")).render(
  <Car year={1969} />
);

مشاهده در ادیتور

ارسال متغیر به عنوان پراپس

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

let x = "Ford";

createRoot(document.getElementById("root")).render(
  <Car brand={x} />
);

مشاهده در ادیتور

حالا اگر مقدار x عوض شود، مقدار پراپس هم عوض می شود. این روش در پروژه های واقعی خیلی کاربردی است.

ارسال شیء و آرایه به عنوان پراپس

وقتی اطلاعات زیادی مرتبط با هم داری، شیء یا آرایه بهتر است. مثلاً چند سال مختلف یا تمام مشخصات ماشین.

let x = [1964, 1965, 1966];
let y = { name: "Ford", model: "Mustang" };

createRoot(document.getElementById("root")).render(
  <Car years={x} carinfo={y} />
);

مشاهده در ادیتور

در کامپوننت می توانی از props.years و props.carinfo استفاده کنی. هرکدام خودش یک نوع داده جداست.

کار با پراپس شیء در کامپوننت

وقتی یک شیء را به عنوان پراپس می فرستی، داخل کامپوننت همان شیء است. پس می توانی با نقطه به فیلدها برسید؛ مثل carinfo.name.

function Car(props) {
  return (
    <>
      <h2>
        My {props.carinfo.name} {props.carinfo.model}!
      </h2>
      <p>
        It is {props.carinfo.color} and it is from {props.carinfo.year}!
      </p>
    </>
  );
}

const carInfo = {
  name: "Ford",
  model: "Mustang",
  color: "red",
  year: 1969
};

createRoot(document.getElementById("root")).render(
  <Car carinfo={carInfo} />
);

مشاهده در ادیتور

اینجا فقط یک پراپس به نام carinfo داریم. اما داخلش چند ویژگی مختلف است. این روش کد را مرتب و کوتاه نگه می دارد.

کار با پراپس آرایه در کامپوننت

اگر آرایه را به عنوان پراپس در React بفرستی، می توانی با ایندکس به خانه هایش برسی. مثل لیست اسامی در مدرسه که شماره صندلی دارند.

function Car(props) {
  return (
    <h2>
      My car is a {props.carinfo[0]} {props.carinfo[1]}!
    </h2>
  );
}

const carInfo = ["Ford", "Mustang"];

createRoot(document.getElementById("root")).render(
  <Car carinfo={carInfo} />
);

مشاهده در ادیتور

در اینجا props.carinfo[0] برند است و props.carinfo[1] مدل. اگر آرایه بزرگ تر باشد، می توانی آن را در حلقه استفاده کنی.

پاس دادن پراپس بین دو کامپوننت

بعضی وقت ها داده اول به یک کامپوننت والد می رسد. بعد والد همان داده را با پراپس به کامپوننت فرزند می فرستد. این الگو در پراپس در React بسیار رایج است.

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <Garage />
);

مشاهده در ادیتور

اینجا Garage والد است و Car فرزند. مقدار برند در تگ Car نوشته شده و داخل خود Car استفاده می شود.

پراپس ها در React فقط خواندنی هستند

نکته: پراپس ها در React فقط خواندنی (Read-only) هستند. یعنی نباید مستقیم مقدارشان را عوض کنی. اگر بخواهی چیزی را تغییر دهی، باید از state یا منطق دیگر استفاده کنی، نه تغییر مستقیم props.

جمع بندی سریع پراپس در React

• پراپس در React مثل ورودی تابع برای کامپوننت هستند.
• روی تگ کامپوننت نوشته می شوند و داخل تابع خوانده می شوند.
• می توانند رشته، عدد، متغیر، شیء یا آرایه باشند.
• برای دسترسی به پراپس از props.name یا ایندکس آرایه استفاده کن.
• پراپس ها فقط خواندنی هستند؛ برای تغییر از state کمک بگیر.