Props Type در React.js چیست ؟

نکته اول اینکه شما باید بدونید Props در react.js چیست که توصیه میکنم حتما مطالعه بفرمایید.

همونطور که توی لینک بالا اشاره شده یک صفحه SPA از کامپوننت های مختلفی تشکیل شده. این کامپوننت ها در شرایط مختلفی نیاز به متغیرها یا پارامترهایی دارن. مثلا ممکنه یه کامپوننت که برای هدر یک سایت استفاده میشه برخی از اطلاعاتش رو نیاز داشته باشه از دیتابیس یا به صورت متغیر بخونه.

در این حالت از Props ها استفاده میشه. در واقع میشه گفت Props ها همون پارامترهای ورودی به کامپوننتها هستن.

Props Type در React.js

خب حالا این متغیرهایی که به کامپوننت ها ارسال میشن در اکثر مواقع نیاز دارن که Validation هایی روی اونها صورت بپذیره. مثلا میخوایم تعیین کنیم که حتما Props ارسال شده به کامپوننت از نوع string باشه و یا از نوع number باشه.

پس میشه گفت ما از Props Type ها برای اعتبار سنجی استفاده می کنیم.

برای استفاده از Props Type ها در ابتدا باید پکیج مورد نظر رو توسط npm نصب کنیم

npm install --save prop-types

بعد از اون در بالای کامپوننت باید کتابخانه مورد نظر رو فراخوانی کنیم

import propType from 'prop-types';

و در نهایت هم میتونیم از این پراپس تایپ ها استفاده کنیم. به مثال زیر توجه کنید

const MyPropsComponent =(propsVar)=>{
    return(
        <h1>
            This Leseon is about {propsVar.name} And Age {propsVar.age}
        </h1>
    )
}

در بالا یک کامپوننت به نام MyPropsComponent داریم که 2 Props به نام name و age داره. حالا ما میخوایم که name حتما از نوع string باشه و age حتما از نوع number و همچنین age حتما وارد شده باشه یعنی isRequired باشه و name هم یک مقدار پیش فرضی رو داشته باشه. پس به صورت زیر می نویسیم

import React from 'react';
import propType from 'prop-types';

const MyPropsComponent =(propsVar)=>{
    return(
        <h1>
            This Leseon is about {propsVar.name} And Age {propsVar.age}
        </h1>
    )
}



export default MyPropsHtmlTag;
MyPropsComponent.propType={
    name : propType.string,
    age : propType.number.isRequired
}

MyPropsComponent.defaultProps={
    name : 'myname'
}

الان اگر هر کدوم از شرایط مشخص شده در Props Type ها رعایت نشه در Consol مرورگر خطا ایجاد میکنه

موفق باشید