آموزش ReactJS – فصل ششم: پراپ ها (Props)

پراپ ها برای انتقال داده به کامپوننت ها فوق العاده کارامد هستند. به جای استفاده دائمی از استیت، بهتر است برنامه نویسان ری اکت از پراپ ها برای توزیع داده ها در اپلیکیشن استفاده کنند. در فصل ششم آموزش های مقدماتی تا پیشرفته ReactJS به شرح نحوه تعریف Prop ها و توزیع دیتا با استفاده از پراپ ها به کامپوننت های مختلف خواهیم پرداخت.

ReactJS - فصل ششم: پراپ Props

تنها تفاوت عملیاتی مهم بین پراپ ها و استیت ها این است که در پراپ ها مقدار تغییر ناپذیر خواهد بود.

به علت قابلیت تغییر ناپذیری پراپ هاست که پیشنهاد می شود یک کامپوننت کانتینر داشته باشید که state های تغییر پذیر را مدیریت می کند و به کامپوننت های درونی اطلاعات را از طریق پراپ ها انتقال دهید.

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

اگر یک مقدار تغییر ناپذیر را می خواهید به کامپوننتی انتقال دهید این کار را در هنگام صدا زدن reactDOM.render() در فایل index.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;

کد زیر را درون index.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('root'));

export default App;

اکنون با اجرای پروژه چیزی شبیه تصویر زیر مشاهده خواهید کرد:

اجرای پروژه انتقال دیتا با پراپ ها

Prop های پیشفرض در ReactJS

شما می توانید با استفاده از پراپ های پیشفرض به کمک تابع سازنده نیز پراپ ها را در کامپوننت ست کنید. استفاده از این روش به جای فانکشن reactDom.render() که در مثال قبلی دیدید، متداول است.

مقادیر مورد نظر خود را با استفاده از آبجکت defaultProps باید به کامپوننت معرفی کنید. مثال زیر به طور کامل این روش را نشان داده است.

کد های زیر محتوای فایل 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;

کد زیر محتوای فایل index.js است:

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

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

در صورت اجرای کد بالا همان نتیجه دریافت می کنیم که در مثال قبل دیدیم.

استفاده همزمان پراپ و استیت در ری اکت

مثال زیر نشان می دهد که شما چگونه می توانید استیت و پراپ را به همراه هم در یک پروژه استفاده کنید.

در این مثال ما اطلاعات را از طریق state به کامپوننت والد انتقال می دهیم و سپس اطلاعات به صورت پراپ بین کامپوننت های درونی تقسیم می شوند.

کد زیر را درون فایل 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;

در فانکشن render() کامپوننت App، پراپ های headerProp و contentProp به کامپوننت های مربوطه ارسال می شوند.

برای اجری مثال بالا کد زیر را درون فایل index.js قرار دهید:

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

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

با اجرای مثال بالا هم نتیجه مانند دو مثال قبل خواهد بود، با این تفاوت که در مثال بالا منبع دریافت اطلاعات و نحوه توزیع اطلاعات بین کامپوننت ها متفاوت است.

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

اعتبار سنجی پراپ ها (Props Validation)

اعتبار سنجی پراپ ها راه حل خوبی برای اجباری کردن استفاده صحیح از کامپوننت هاست.

اعتبار سنجی پراپ ها در هنگامی که بر روی پروژه های بزرگتر کار می کنید بسیار کارامد خواهد بود و از ایجاد باگ های بسیاری در آینده جلوگیری خواهد کرد.

همچنین خوانایی کد ها با استفاده از اعتبار سنجی پراپ ها بهتر خواهد شد. زیرا برای برنامه نویسان دیگر مشخص شده است که از یک کامپوننت چگونه باید استفاده کنند.

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

در مثالی که قصد انجام آن را داریم، ما با استفاده از آبجکت App.propTypes بر روی کامپوننت App مشخص می کنیم که قصد داریم پراپ ها را با چه نوعی دریافت کنیم.

پس از استفاده از App.propTypes قادر هستیم با استفاده از App.defaultProps مقادیر لازم را برای پراپ ها ست کنیم.

کد های زیر را درون فایل App.jsx قرار دهید:

import React from 'react';
import PropTypes from 'prop-types'
class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
   propObject: PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

کد زیر را در فایل index.js قرار دهید:

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

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

با اجرای پروژه نتیجه زیر چاپ خواهد شد:

اجرای اعتبار سنجی پراپ ها

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

به عنوان مثال اگر در کد های فایل App.jsx مقدار پراپ propNumber را از 1 به “test” تغییر دهیم، با پیغام خطا در کنسول مواجه خواهیم شد. برای تست مشاهده این پیغام خطا، کد زیر را در فایل App.jsx کپی کنید:

import React from 'react';
import PropTypes from 'prop-types'
class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
   propObject: PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: "test",
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

در صورت اجرای دوباره پروژه، در محیط کنسول مرورگر پیغام خطای زیر را مشاهده خواهید کرد (شاید چیزی شبیه به این):

 Warning: Failed prop type: Invalid prop `propNumber` of type `string` supplied to `App`, expected `number`.

این پیغام خطا می گوید که برای پراپ propNumber باید مقدار عددی باشد (چون ما نوع داده عددی را در App.propTypes اجباری کرده ایم) ولی این پراپ از نوع رشته تعریف شده است.

ویدیوها و مطالب مشابه