React prop-types｜套件 prop-types 使用方式及應用情境。

關於寫 React 不能不知道的套件 — prop-types

【前言 Foreword】

prop-types

因為 Javascript 是弱型別的語言，在型別錯誤時不會顯示錯誤，需要藉由其他套件來處理，也就是本篇的主角 — prop-types，負責檢查 props 的值是否符合元件的規定。

而型別檢查的優點包含，有利於日後閱讀程式碼、共同協作者更快進入狀況、出現 error 時比較快找到錯誤點等。

React

在 React v15.5，prop-types 就不被包含在 React 專案中，需要手動安裝套件。(每周下載量達一千五百萬)

【前置作業 Preparation】

• 建立 React 專案

npx create-react-app test

• 安裝套件

npm install --save prop-types

• import

import PropTypes from 'prop-types';

【實作 Hands-on】

一個最簡單的 demo 為本篇範例，基本的元件傳遞 props ，並指定 name 必須是字串:

function App() {
    return <Greeting name='Molly' />
}
const Greeting = (props) => {
    return (
        <h1>
            Hello, {props.name}
        </h1>
    )
}
Greeting.propTypes = {
    name: PropTypes.string,
}

propTypes 可檢查型別包含

• string、array、bool、func、number、object、symbol (JS 原生類別)

Greeting.propTypes = {
    name: PropTypes.string,
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
}

• children 只包含一個元素

// A React element (ie. <MyComponent />).
  optionalElement: PropTypes.element,

• PropTypes.instanceOf() 必須是指定的的 class

// JS's instanceof operator.
  optionalMessage: PropTypes.instanceOf(Message),

• props 必須是其中一個指定的值

optionalEnum: PropTypes.oneOf(['Apple', 'Banana']),

• props 必須是其中一種指定的型別

optionalUnion: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]),

• props 必須是陣列且陣列內皆為數字

optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

• props 必須是物件且物件的值皆為數字

optionalObjectOf: PropTypes.objectOf(PropTypes.number)

• props 為指定格式的物件 (object)

optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number,
    }),

• isRequired，加在最後面表示該 props 為必須提供(最常用的)

requiredFunc: PropTypes.func.isRequired,

• PropTypes.any 任何型別都可以
  (常用於想給某些參數設置為必填，但又不需要限制的時候使用)

requiredAny: PropTypes.any.isRequired,

• defaultProps 預設值

Greeting.defaultProps = {
    name: 'Stranger',
}

【總結 Conclusion】

現在才知道應該每個專案都需要導入PropTypes 實在太晚了呢 ٩(ˊᗜˋ )و。