React中的Props型別校驗和預設值詳解

2022-03-31 16:00:52

一、props規則校驗

安裝 prop-types 包

$ npm install prop-types

匯入 propTypes 物件

import propTypes from 'prop-types';

元件名.propTypes = {} 設定元件傳參規則

Comp.propTypes = {
	param: propTypes.array  // Comp元件 的 param 引數必須是 陣列型別
}

範例:

// props 型別校驗規則
import React from 'react';
// 1. npm i prop-types
// 2. 匯入 propTypes 物件
import PropTypes from "prop-types";
function Son({list}) {
    return (
        <div>
            {list.map(item => <p key={item}>{item}</p>)}
        </div>
    )
}
// 3. 元件名.propTypes = {} 給元件設定規則
Son.PropTypes={
    // 4. 各欄位設定規則
    list: PropTypes.array // Son的list引數必須是 陣列形式
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son list="我企鵝親子裝"/>
            </div>
        )
    }
}
export default App;

報錯提示如下：

四種常見結構

常用型別：array、number、bool、string、func、object、symbol
React元素型別：element
必填項：isRequired
特定的結構物件：shape({})

核心程式碼：

// 1.型別
optionalFun: PropTypes.fun;
// 2.必填項
requiredFun: PropTypes.fun.isRequired;
// 3. // 可以指定一個物件由特定的型別值組成
optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
}),

二、props預設值

1.函數式預設值

1.1 函數引數預設值（新版推薦）

範例：

import React from "react";
// 1. 函數引數預設值
function Son1({defaultTime = 10}) {
    return (
        <div>The timer is : {defaultTime}</div>
    )
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son1 />
            </div>
        )
    }
}
export default App;

1.2 defaultProps 設定預設值

function Son2({defaultTime}) {
    return (
        <div>The second timer is: {defaultTime}</div>
    )
}
// 2. defaultProps 設定預設值
Son2.defaultProps = {
    defaultTime: 100
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son1 />
                <Son2 />
            </div>
        )
    }
}

2.類式預設值

2.1 defaultProps

class Son3 extends React.Component {
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}
// defaultProps 設定預設值
Son3.defaultProps = {
    defaultTime: 3333
}

2.2 類靜態屬性宣告

class Son4 extends React.Component {
    static defaultProps ={
        defaultTime: 66666
    }
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}

完整範例

// props預設值
import { func } from "prop-types";
import React from "react";
// 1.1 函數引數預設值
function Son1({defaultTime = 10}) {
    return (
        <div>The timer is : {defaultTime}</div>
    )
}

function Son2({defaultTime}) {
    return (
        <div>The second timer is: {defaultTime}</div>
    )
}
// 1.2 defaultProps 設定預設值
Son2.defaultProps = {
    defaultTime: 100
}
class Son3 extends React.Component {
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}
// 2.1 函數 defaultProps 設定預設值
Son3.defaultProps = {
    defaultTime: 3333
}
// 2.2 靜態屬性宣告
class Son4 extends React.Component {
    static defaultProps ={
        defaultTime: 66666
    }
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son1 />
                <Son2 />
                <Son3 />
                <Son4 />
            </div>
        )
    }
}
export default App;

如圖：