پراپس ری‌ اکت

پراپس (Props) راهی برای انتقال داده از یک کامپوننت والد به فرزند است.

این داده‌ها فقط قابل خواندن هستند و می‌توانند انواع مختلفی مانند رشته، عدد، آرایه، شیء یا حتی تابع داشته باشند.

نکته: props در واقع مخفف properties به معنای «ویژگی‌ها» است.

پراپس روشی برای ارسال داده از کامپوننت والد به فرزند است.

<Greeting name="PNLdev" />

در کامپوننت فرزند، این داده از طریق پارامتر props دریافت می‌شود و می‌توانید از آن در خروجی استفاده کنید:

function Greeting(props) {
  return <h1>Hello، {props.name}!</h1>;
}

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

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

• رشته (string):

<Greeting name="PNLdev" />

function Greeting({ name }) {
  return <h1>Hello، {name}!</h1>
}

نکته: با استفاده از Destructuring در پارامترهای تابع، می‌توانید به‌جای props.name، مستقیماً از { name } استفاده کنید.

• عدد (number):

<Counter count={5} />

function Counter({ count }) {
  return <p>{count}!</p>
}

• بولین (boolean):

<Status online={true} />

function Status({ online }) {
  return (
    <p>online: {online}!</p>
  );
}

• شیء (object):

<Profile info={{name: "Nima", age: 19}} />

function Profile({ info }) {
  return (
    <p>Name: {info.name}!</p>
    <p>age: {info.age}!</p>
  );
}

• آرایه (array):

<ColorList colors={["red", "green", "blue"]} />

function ColorList({ colors }) {
  return (
    <ul>
      {colors.map((color, index) => (
        <li key={index}>{color}</li>
      ))}
    </ul>
  );
}

• تابع (function):

<CustomButton handleClick={() => alert("Clicked!")} />

function CustomButton({ handleClick }) {
  return <button onClick={handleClick}>Click me!</button>
}

می‌توانید چند پراپس را به طور همزمان به یک کامپوننت فرستاد:

<Student name="رضا" grade={18} present={true} />

function Student({ name, grade, present }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Grade: {grade}</p>
      <p>Present: {present}</p>
    </div>
  );
}