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;

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

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

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;

محتوای فایل main.js:

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

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

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;

محتوای فایل main.js:

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

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