۳۰
تیر

جلسه ۰۶ : Prop ها در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش Prop ها در React JS بپردازیم.

مقدمه

Prop ها در واقع آرگومان هایی هستید که به کامپوننت ها ارسال می‌شوند.

این آرگومان ها به صورت مقادیر html اسال می‌شوند.

Prop ها در React JS

همانطور که گفتیم، برای ارسال Prop ها برای کامپوننت ها، از گرامر ارسال مقادیر در html استفاده می‌کنیم.

مثال:

مثال :

const myelement = <Car brand="Ford" />;

1	const myelement = <Car brand="Ford" />;

کامپوننت ها نیز با استفاده از شی props می‌توانند به Prop هایی که به آن ها ارسال شده اند، دسترسی داشته باشند.

مثال :

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h1>;
  }
}

class Car extends React.Component {

render() {

return <h2>I am a {this.props.brand}!</h1>;

}

اگر به جای رشته، متغیری را می‌خواهید به عنوان prop ارسال کنید، باید آن متغیر را داخل {} قرار دهید.

مثال :

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carname} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

class Car extends React.Component {

render() {

return <h2>I am a {this.props.brand}!</h2>;

}

class Garage extends React.Component {

render() {

const carname = "Ford";

return (

<div>

<h1>Who lives in my garage?</h1>

</div>

);

}

ReactDOM.render(<Garage />, document.getElementById('root'));

خروجی:

مثال :

Who lives in my Garage?
I am a Ford!

1 2	Who lives in my Garage? I am a Ford!

با اشیا نیز همین گونه باید برخورد کرد:

مثال :

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand.model}!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

class Car extends React.Component {

render() {

return <h2>I am a {this.props.brand.model}!</h2>;

}

class Garage extends React.Component {

render() {

const carinfo = {name: "Ford", model: "Mustang"};

return (

<div>

<h1>Who lives in my garage?</h1>

</div>

);

}

ReactDOM.render(<Garage />, document.getElementById('root'));

خروجی:

مثال :

Who lives in my Garage?
I am a Mustang!

1 2	Who lives in my Garage? I am a Mustang!

Prop ها در سازنده

اگر کامپوننت شما دارای تابع سازنده (constructor) است، شی props حتما باید به عنوان آرگومان به تابه سازنده ارسال شود. (همچنین تابع super داخل سازنده)

مثال:

مثال :

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

class Car extends React.Component {

constructor(props) {

super(props);

}

render() {

return <h2>I am a Car!</h2>;

}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

نکته : Prop ها فقط خواندنی است و هرگونه تلاش برای تغییر مقادیر آن ها، خطا به همراه دارد.

جلسه آموزش Prop ها در React JS نیز به پایان رسید.

در جلسه بعد به آموزش State ها در React JS خواهیم پرداخت.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۶ : Prop ها در React JS

مقدمه

Prop ها در React JS

Prop ها در سازنده

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ