اعتبارسنجی Props ها در ری اکت

امید کیانی 1 26 بازدید 1398/07/11
اعتبارسنجی Props ها در ری اکت

props ها یک مکانیزم مهمی برای پاس دادن مقدار attribute های اصطلاحا (read only) برای کامپوننت ها هستند.propsها معمولا نیاز دارند تا به طور مستقیم در کامپوننت ها استفاده شوند.اگر مستقیما از props ها در کامپوننت ها استفاده نکنیم ممکن است همانطور که انتظار می رود رفتار نکنند،به همین دلیل ما از Props Validationها برای بهبود کامپوننت های ری اکت استفاده می کنیم.

Props Validation ها ابزاری است که به توسعه دهنده ها برای جلوگیری از مشکلات کمک می کنند و باعث می شوند تا کد ما خواناتر شود.

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

 

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

App.propTypes برای تایید اعتبارسنجی در کامپوننت های ری اکت استفاده می شود.هنگامی که به برخی props ها مقدار نامعتبری ارسال می کنیم،ما یک هشدار در کنسول مرورگر دریافت می کنیم.

سینتکس:

class App extends React.Component {  
    render() {}  
}  
Component.propTypes = { /*Definition */};  

 

شرح PropsType
 props می تواند هر نوع داده ای باشد. PropTypes.any 
   .باید یک آرایه باشد props  PropTypes.array 
 props باید از نوع boolean باشد.   PropTypes.bool 
  .باید یک تابع باشد props  PropTypes.func 
  .باید یک عدد باشد props  PropTypes.number 
 .باید یک شیء باشد props  PropTypes.object 
  .باید یک رشته باشد props  PropTypes.string 
.باید یک نماد باشد props  PropTypes.symbol 
 props باید یک نمونه از یک کلاس جاوااسکریپت باشد.  PropTypes.instanceOf 
.باید مقدار داشته باشد props  PropTypes.isRequired 
  .باید یک عنصر باشد props  PropTypes.element 
 props ها می توانند اعداد،رشته،عناصر یا آرایه ای که   حاوی این نوع type ها باشند را render کنند.   PropTypes.node 
 props ها می توانند یکی از چندین نوع مقادیر خاص   باشند.  ()PropTypes.oneOf 
 props ها باید شیء ای باشند که می توانند یکی از نوع های مختلف باشند. PropTypes.oneOfType([PropTypes.string,PropTypes.number]  [([

در اینجا ما یک کامپوننت به نام App که حاوی همه ی props هایی است که نیاز داریم،ایجاد می کنیم.در مثال زیر App.propTypes برای اعتبارسنجی props ها استفاده می شود.

برای اعتبارسنجی props ها شما باید خط زیر را در بالای کامپوننت اضافه کنید:

import PropTypes from 'prop-types';

App.js

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>ReactJS Props validation example</h1>  
              <table>  
                  <tr>  
                      <th>Type</th>  
                      <th>Value</th>  
                      <th>Valid</th>  
                  </tr>  
                <tr>  
                      <td>Array</td>  
                      <td>{this.props.propArray}</td>  
                      <td>{this.props.propArray ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Boolean</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Function</td>  
                      <td>{this.props.propFunc(5)}</td>  
                      <td>{this.props.propFunc(5) ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>String</td>  
                      <td>{this.props.propString}</td>  
                      <td>{this.props.propString ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Number</td>  
                      <td>{this.props.propNumber}</td>  
                      <td>{this.props.propNumber ? "true" : "False"}</td>  
                  </tr>  
             </table>  
        </div>  
        );  
   }  
}  
App.propTypes = {  
    propArray: PropTypes.array.isRequired,  
    propBool: PropTypes.bool.isRequired,  
    propFunc: PropTypes.func,  
    propNumber: PropTypes.number,  
    propString: PropTypes.string,   
}  
App.defaultProps = {  
    propArray: [1,2,3,4,5],  
    propBool: true,  
    propFunc: function(x){return x+5},  
    propNumber: 1,  
    propString: "Laraman",  
}  
export default App;

Main.js

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

خروجی:

 

اعتبارسنجی  props ها به صورت سفارشی

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

  • props: پارامتر اول در کامپوننت است.
  • propName: این مقداری است که اعتبارسنجی می شود.
  • componentName: نام کامپوننتی است که اعتبارسنجی در آن انجام می شود.

مثال:

var Component = React.createClass({  
App.propTypes = {  
   customProp: function(props, propName, componentName) {  
        if (!item.isValid(props[propName])) {  
          return new Error('Validation failed!');  
        }  
      }  
   }  
})

 

 

مقالات مرتبط
امید کیانی 57 بازدید 1398/06/15
امید کیانی 54 بازدید 1398/06/19
حمید تیموری 392 بازدید 1397/10/22
امید کیانی 39 بازدید 1398/06/18
حمید تیموری 1223 بازدید 1397/07/09
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید