بخش های اصلی

آموزش ReactJS

ReactJS – مقدمه ی Propها

تفاوت اصلی state و prop اینه که propها تغییرناپذیرن. به این دلیلِه که کامپوننتِ container باید stateای تعریف کنه قابل بروزرسانی و تغییرپذیر باشه، درحالی که کامپوننت هایِ child فقط باید اطلاعات را با استفاده از propها پاس بدن.

استفاده از Propها

اگه برای کامپوننت نیاز به اطلاعات تغییر ناپذیر داشته باشین، تنها کاری که باید بکنین این است که، در main.js، propها را به تابع reactDOM.render() اضافه کنین و از آن در کامپوننت استفاده کنین.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

خروجی کد بالا بصورت زیر خواهد بود:

react props example

propهای پیش فرض

می توانید بجای اضافه کردن عنصرِ reactDOM.render()، مقادیر پراپرتی ها مستقیماً را به سازنده ی کامپوننت اضافه کنین.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

خروجی کد بالا بصورت زیر خواهد بود:

react props example

state و propها

مثال زیر، نحوه ی ترکیب state و prop ها در داخل برنامه را نشان میده. در این مثال state را در کامپوننت والد قرار دادیم و در ساختار درختی کامپوننت، آن را با استفاده از propها، به سطح پایین تر پاس دادیم.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from props...",
         "content": "Content from props..."
      }
   }
	
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

نتیجه ی خروجی این کد هم مثل دو مثال قبلی خواهد بود، فقط منبع داده فرق می کنه که در این کد در اصل از state میاد. اگر بخوایم این کد را به روز رسانی کنیم، فقط باید State را بروز رسانی کنیم، بقیه ی کامپوننت های فرزند، بصورت اتوماتیک بروزرسانی میشن. برای اطلاعات بیش تر به بخشِ events مراجعه کنین.

react props example

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد