Props در ReactJS – آموزش ReactJS

پنجشنبه ۹ اسفند ۱۳۹۷
بازدید ۱,۵۴۳ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر reactjs-props-overview_6115 Props در ReactJS - آموزش ReactJS

Props در ReactJS

در این بخش props در ReactJs را بررسی خواهیم کرد. تفاوت اصلی میان state و props در فریم ورک ReactJS این است که props غیرقابل تغییر است.

استفاده از props

زمانی که در داخل یک کامپوننت به داده های غیرقابل تغییر نیز داشته باشیم، می توانیم از props استفاده کنیم. برای این منظور کافیست، آن ها را با تابع reactDOM.render در فایل main.js اضافه کنید. مانند نمونه زیر:

محتوای فایل 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;

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;

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;

خروجی مثال فوق:

تصویر reactjs-props-overview_6115_1 Props در ReactJS - آموزش ReactJS

Props های پیشفرض

شما همچنین می توانید به جای اضافه کردن props ها در تابع 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;

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'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

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

خروجی دقیقا مشابه مثال قبلی است:

تصویر reactjs-props-overview_6115_2 Props در ReactJS - آموزش ReactJS

State و Props

مثال زیر نحوه ترکیب state و props در برنامه را نشان می دهد. ما state و props را در کامپوننت اصلی (والد) تنظیم کرده و آن را به کامپوننت های فرزند ارسال می کنیم.

محتوای فایل 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;

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>

</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'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

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

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

تصویر reactjs-props-overview_6115_3 Props در ReactJS - آموزش ReactJS