مفهوم Props ها در ری اکت

امید کیانی 1 27 بازدید 1398/07/10
مفهوم Props ها در ری اکت

Props مخفف کلمه ی "Properties" است،آنها فقط برای خواندن اطلاعات مورد استفاده قرار می گیرند.

Props ها شبیه به attributeهای html کار می کنند بدین صورت که شی ای هستند که مقدار attribute های یک تگ html را ذخیره می کنند.

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

props ها تغییرناپذیر هستند به طوری که ما نمی توانیم props ها را از درون یک کامپوننت تغییر دهیم.

ما می توانیم attribute هایی را اضافه کنیم که props نامیده می شود. این attribute ها در کامپوننت به عنوان "this.props" وجود دارند که  می توانند برای render کردن دیتا در متد render استفاده شوند.

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

به مثال زیر توجه کنید:

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
            <h1> Welcome to { this.props.name } </h1>    
            <p> <h4> Laraman is one of the best website of programming.</h4> </p>          
          </div>  
      );  
   }  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App name = "Laraman!!" />, document.getElementById('app')); 

خروجی:

 

Props های پیش فرض

همیشه نیازی نیست تا propsها درون المنت ()reactDom.render اضافه شوند،ما می توانیم یک مقدار پیش فرض را به طور مستقیم روی کامپوننت در نظر بگیریم.

مثال:

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
              <h1>Default Props Example</h1>  
            <h3>Welcome to {this.props.name}</h3>   
            <p>Laraman is one of the best website of programming.</p>          
          </div>  
        );  
    }  
}  
App.defaultProps = {  
   name: "Laraman"  
}  
export default App;

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

خروجی:

 

Stateها و Props ها

ما می توانیم state ها و props ها را با یکدیگر ادغام کنیم به طوری که ما می توانیم state را درون کامپوننت والد قرار داده و آن را به کامپوننت فرزند با استفاده از propsها ارسال کنیم.

به مثال زیر توجه کنید:

App.js

mport React, { Component } from 'react';  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {  
         name: "Laraman",         
      }  
   }  
   render() {  
      return (  
         <div>  
            <Laraman lrmProp = {this.state.name}/>             
         </div>  
      );  
   }  
}  
class Laraman extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>State & Props Example</h1>  
              <h3>Welcome to {this.props.lrmProp}</h3>  
              <p>Laraman is one of the best website of programming.</p>  
         </div>    
      );  
   }  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

خروجی:

  

مقالات مرتبط
حمید تیموری 593 بازدید 1397/08/01
امید کیانی 48 بازدید 1398/06/17
امید کیانی 12 بازدید 1398/07/13
حمید تیموری 615 بازدید 1397/05/20
امید کیانی 54 بازدید 1398/06/19
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید