react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

پروپرتی‌ها (Props) در React

در React، Props (مخفف Properties) مکانیزمی برای انتقال داده‌ها از یک کامپوننت والد به کامپوننت فرزند هستند. آن‌ها فقط خواندنی (Read-Only) هستند و کامپوننت‌های فرزند نمی‌توانند مقدار آن‌ها را تغییر دهند.

 

روش استفاده از Props در کامپوننت‌های فانکشنی

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

مثال:

const Greeting = ({ name, age }) => {
  return (
    <div>
      <h1>سلام، {name}!</h1>
      <p>سن شما: {age}</p>
    </div>
  );
};
// استفاده از کامپوننت با مقداردهی به Props
const App = () => {
  return <Greeting name="علی" age={25} />;
};
export default App;

 

✔ در این مثال، مقدار name="علی" و age={25} از کامپوننت App (والد) به کامپوننت Greeting (فرزند) ارسال می‌شود.

 

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

در کامپوننت‌های کلاسی، Props از طریق this.props در render() در دسترس هستند.

مثال:

import React, { Component } from "react";
class Greeting extends Component {
  render() {
    return (
      <div>
        <h1>سلام، {this.props.name}!</h1>
        <p>سن شما: {this.props.age}</p>
      </div>
    );
  }
}
const App = () => {
  return <Greeting name="زهرا" age={30} />;
};
export default App;

 

در اینجا this.props.name و this.props.age برای دسترسی به مقادیر name و age استفاده شده‌اند.

 

ارسال مقادیر پیش‌فرض به Props

اگر مقدار Props تعیین نشود، می‌توان از مقدار پیش‌فرض (Default Props) استفاده کرد.

برای کامپوننت‌های فانکشنی:

const Greeting = ({ name = "مهمان", age = 18 }) => {
  return (
    <div>
      <h1>سلام، {name}!</h1>
      <p>سن شما: {age}</p>
    </div>
  );
};

 

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

class Greeting extends Component {
  static defaultProps = {
    name: "مهمان",
    age: 18,
  };
  render() {
    return (
      <div>
        <h1>سلام، {this.props.name}!</h1>
        <p>سن شما: {this.props.age}</p>
      </div>
    );
  }
}

 

حالا اگر name یا age مقدار نداشته باشند، مقدار پیش‌فرض نمایش داده می‌شود.

 

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

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

مثال:

const Parent = () => {
  const user = { name: "محمد", age: 28 };
  return <Child {...user} />;
};
const Child = ({ name, age }) => {
  return (
    <div>
      <h1>سلام، {name}!</h1>
      <p>سن شما: {age}</p>
    </div>
  );
};
export default Parent;

 

در اینجا از Spread Operator (...user) برای ارسال همه‌ی Props استفاده شده است.

نکات مهم درباره Props

  1. Props فقط خواندنی (Immutable) هستند و نباید در داخل کامپوننت مقدارشان را تغییر دهیم.
  2. برای ارسال مقادیر پویا از {} استفاده می‌شود، مثل {age={user.age}}.
  3. می‌توان تابع را به‌عنوان Prop ارسال کرد تا داده‌ها از فرزند به والد ارسال شوند.

جمع‌بندی:

  • Props برای انتقال داده‌ها از والد به فرزند استفاده می‌شوند.
  • در فانکشنال کامپوننت‌ها، به‌صورت پارامتر تابع و در کلاس کامپوننت‌ها، با this.props قابل دسترسی هستند.
  • مقدار پیش‌فرض برای جلوگیری از undefined شدن استفاده می‌شود.
  • می‌توان توابع را به‌عنوان Props ارسال کرد تا ارتباط بین کامپوننت‌ها برقرار شود.