آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

ارزیابی ویژگی (Prop Validation) در ReactJS

دوره های مرتبط با این مقاله

ارزیابی ویژگی ها(Prop Validation) در ReactJS

ارزیابی ویژگی ها روشی مفید جهت استفاده ی صحیح از اجزا به شمار می رود. از این طریق می توانیم طی برنامه نویسی از باگ ها و مشکلات آینده جلوگیری کنیم، مخصوصا زمانی که برنامه به اندازه ی کافی بزرگ می شود. همچنین این قابلیت خوانایی کد را افزایش می دهد، زیرا از این طریق می توانیم ببینیم که چگونه از هر یک از اجزا باید استفاده شود.


ارزیابی ویژگی ها مربوط به ReactJS

در این مثال می خواهیم جزء App را به همراه تمام prop هایی که نیاز داریم، ایجاد کنیم. App.propTypes جهت ارزیابی ویژگی ها کاربرد دارد. اگر برخی از ویژگی ها از نوع صحیحی که ما تعیین کرده ایم استفاده نکنند، با هشدار کنسول مواجه می شویم. بعد از مشخص کردن الگوهای ارزیابی 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'));

ارزیابی ویژگی ها(Prop Validation) در ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 81
  •    80
  • تاریخ ارسال :   1397/10/18

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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