استفاده از propType در ری اکت

propType in React

استفاده از propType

حالا که یاد گرفته ایم به شکل صحیح از setState استفاده کنیم، بد نیست نگاهی به استفاده صحیح و بهینه از prop ها بیندازیم. به فایل Person.js بروید؛ در این فایل از چند prop استفاده می کنیم:

    render() {
        console.log('[Person.js rendering...');
        return (
            <Aux>
                <p key="i1" onClick={this.props.click}>I'm {this.props.name} and I am {this.props.age} years old!</p>
                <p key="i2">{this.props.children}</p>
                <input key="i3" type="text" onChange={this.props.changed} value={this.props.name} />
            </Aux>
        );
    }

prop های name و age و children (که یک prop خاص است) و changed. روش فعلی ما هیچ مشکلی ندارد اما می توانیم کدها را طوری بنویسیم که به طور واضح مشخص شود کامپوننت ما از کدام prop ها استفاده کرده و در صورت استفاده از prop های اشتباه، خطایی نیز ارسال شود.

اگر به تنهایی روی یک پروژه کار می کنید این مسئله اهمیت چندانی برایتان نخواهد داشت چرا که خودتان همیشه می دانید از چه prop هایی استفاده می کنید اما اگر در حال توسعه کتابخانه برای دیگران هستید، یا اگر در یک تیم کار می کنید احتمال دارد که بقیه کاربران از prop های شما به شکل اشتباه استفاده کنند (به طور مثال افراد ممکن است ندانند که age باید عدد باشد و سعی کنند یک رشته را به آن پاس بدهند).

برای مشخص کردن تمامی این موارد می توانیم از یک پکیج به نام prop-types استفاده کنیم. برای این کار به ترمینال درون خود vscode می رویم و کد زیر را اجرا می کنیم:

npm install --save prop-types

با اجرای این دستور، پکیج مورد نظر به صورت خودکار برایتان نصب می شود. با اینکه این پکیج جزء خود برنامه Create-react-app نیست اما توسط خود تیم توسعه دهنده react ساخته شده است و می توانید با خیال راحت از آن استفاده کنید.

حالا هر جایی که بخواهیم از propType استفاده کنیم باید آن را import کنیم. من برای شروع به فایل Person.js می رویم و میگوییم:

import PropTypes from 'prop-types';

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

Person.propTypes = {
    
}

یعنی پس از تعریف کامپوننت و چند خط پایین تر از آن propType (حتما به همین شکل و با p کوچک باشد) استفاده می کنیم. سپس به آن یک شیء می دهیم. حالا تا زمانی که در development mode باشیم React حواسش به این شیء هست و اگر به prop های خود مقدار اشتباه بدهید به شما خطا خواهد داد.

خصوصیات این شیء نام همان prop های شما و value های آن نیز نوع prop خواهند بود بنابراین:

Person.propTypes = {
    click: PropTypes.func
}

این می گوید که نوع prop ما در کلیک از نوع تابع است یعنی باید یک تابع به آن داده شود.

حالا این مورد را برای تمامی prop هایمان انجام می دهیم:

Person.propTypes = {
    click: PropTypes.func,
    name: PropTypes.string,
    age: PropTypes.number,
    changed: PropTypes.func
}

البته شما می توانید prop type های پیشرفته تری را نیز بنویسید؛ به طور مثال بگویید که فلان property باید این آرگومان ها را گرفته و چیزی شبیه به این به من برگرداند. برخی از موارد پر مصرف در prop type ها بدین شکل اند:

PropTypes.any: یعنی prop ما می تواند از هر نوعی باشد.
PropTypes.bool : یعنی prop ما باید از نوع Boolean باشد.
PropTypes.number : یعنی prop ما باید از نوع عدد یا همان number باشد.
PropTypes.string : یعنی prop ما باید از نوع رشته یا همان string باشد.
PropTypes.func : یعنی prop ما باید از نوع تابع باشد.
PropTypes.array : یعنی prop ما باید از نوع آرایه باشد.
PropTypes.object: یعنی prop ما باید از نوع شیء باشد.
PropTypes.symbol: یعنی prop ما باید از نوع نماد یا symbol باشد.

البته حالت های بسیار بیشتری از این چند مورد وجود دارد. به طور مثال:

PropTypes.node
PropTypes.element
PropTypes.oneOf
PropTypes.oneOfType
PropTypes.arrayOf
PropTypes.objectOf
PropTypes.shape
و انواع مختلف دیگر

بررسی جزئیات این موارد نیاز به جلسات جداگانه دارد که در دوره ما نمی گنجد اما اگر دوست دارید اطلاعات بیشتری در این رابطه کسب کنید می توانید با مراجعه به وب سایت react و همچنین صفحات توسعه دهندگان react در مورد این پکیج اطلاعات بیشتری کسب کنید. در فضای آنلاین همیشه آموزش های زیادی وجود دارد.

در حال حاضر نباید هیچ تغییری را در مرورگر مشاهده کنید اما بیایید کاری کنیم تا با خطا مواجه شویم. به طور مثال بیایید در فایل App.js و در قسمت State به جای عدد 28 برای سن Max از یک رشته استفاده کنیم:

  state = {
    persons: [
      { id: 'asfa1', name: 'Max', age: "28" },
      { id: 'vasdf1', name: 'Manu', age: 29 },
      { id: 'asdf11', name: 'Stephanie', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false,
    showCockpit: true,
    changeCounter: 0
  }

حالا اگر یادتان باشد درون فایل Person.js گفته بودیم که:

 age: PropTypes.number,

حالا اگر به مرورگر رفته و Toggle Persons را کلیک کنیم، در قسمت Cnosole یک خطا می گیریم:

index.js:2178 Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `Person`, expected `number`.
    in Person (at witchClass.js:6)
    in Unknown (at Persons.js:41)
    in Persons (at App.js:84)
    in aux (at App.js:91)
    in App (at witchClass.js:6)
    in div (at witchClass.js:5)
    in Unknown (at src/index.js:7)

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