بخش های اصلی

آموزش ReactJS

ReactJS – اعتبارسنجی Propها (Props Validation)

اعتبارسنجیِ Propها زمانی مفیدِه که بخواین کاری کنین که از کامپوننت به درستی استفاده بشه، و در طول طراحی و توسعه کمک می کنه تا زمانی که برنامه گسترش یافت و بزرگ تر شد، از بوجود آمدن باگ ها و مشکلات جلوگیری بشه. همچنین از آنجایی که می توانید نحوه ی استفاده ی کامپوننت ها را ببینین و یادبگیرین، کد خواناتر می شه.

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

در مثال زیر یک کامپوننتِ برنامه با تمام propهایی که نیاز داریم ایجاد کردیم. انواعِ App.prop برای اعتبارسنجیِ propها استفاده شدن. اگه برخی از propها از انواع داده ی صحیحی که به آن ها تخصیص داده ایم استفاده نکنن، یک اخطارِ کنسول به ما داده میشه. بعد از این که الگوهای اعتبارسنجی را مشخص کردیم، App.defaultProps را تنظیم می کنیم.

App.jsx

import React from 'react';

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: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.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;

main.js

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

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

از آنجایی که تمام کدها معتبر هستن، خروجی زیر به ما نمایش داده میشه.

react props validation example

حتماً متوجه شدین که هنگام اعتبارسنجیِ propArray و propBppl از isRequired استفاده کردیم. درصورتی که یکی از دو موردی  که در کد بالا از isRequired استفاده کرده اند، وجود نداشته باشن، خطا میده. اگه propArray: [1,2,3,4,5] از شیءِ App.defaultProps حذف بشه، کنسول اخطارِ log میده.

react props validation error

اگه مقدار propArray: 1 باشه، React اخطار میده که اعتبارسنجیِ propType با شکست مواجه شده چون نیاز به نوعِ آرایه ای داره، درحالیکه عدد به آن داده شده.

react props validation error 2

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

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

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

تبلیغات

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

https://telegram.me/softskill_ir

آخرین مقالات

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

خبـرنــامه

Newsletters

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