React中的Props類型校驗(yàn)和默認(rèn)值詳解

更新時間：2022年03月31日 12:14:01 作者：前端卡卡西呀

這篇文章主要為大家詳細(xì)介紹了React中的Props類型校驗(yàn)和默認(rèn)值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、props規(guī)則校驗(yàn)

安裝 prop-types 包

$ npm install prop-types

導(dǎo)入 propTypes 對象

import propTypes from 'prop-types';

組件名.propTypes = {} 設(shè)置組件傳參規(guī)則

Comp.propTypes = {
	param: propTypes.array  // Comp組件 的 param 參數(shù)必須是 數(shù)組類型
}

示例:

// props 類型校驗(yàn)規(guī)則
import React from 'react';
// 1. npm i prop-types
// 2. 導(dǎo)入 propTypes 對象
import PropTypes from "prop-types";
function Son({list}) {
    return (
        <div>
            {list.map(item => <p key={item}>{item}</p>)}
        </div>
    )
}
// 3. 組件名.propTypes = {} 給組件設(shè)置規(guī)則
Son.PropTypes={
    // 4. 各字段設(shè)置規(guī)則
    list: PropTypes.array // Son的list參數(shù)必須是 數(shù)組形式
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son list="我企鵝親子裝"/>
            </div>
        )
    }
}
export default App;

報(bào)錯提示如下：

在這里插入圖片描述

四種常見結(jié)構(gòu)

常用類型：array、number、bool、string、func、object、symbol
React元素類型：element
必填項(xiàng)：isRequired
特定的結(jié)構(gòu)對象：shape({})

核心代碼：

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

二、props默認(rèn)值

1.函數(shù)式默認(rèn)值

1.1 函數(shù)參數(shù)默認(rèn)值（新版推薦）

示例：

import React from "react";
// 1. 函數(shù)參數(shù)默認(rèn)值
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 設(shè)置默認(rèn)值

function Son2({defaultTime}) {
    return (
        <div>The second timer is: {defaultTime}</div>
    )
}
// 2. defaultProps 設(shè)置默認(rèn)值
Son2.defaultProps = {
    defaultTime: 100
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Son1 />
                <Son2 />
            </div>
        )
    }
}

在這里插入圖片描述

2.類式默認(rèn)值

2.1 defaultProps

class Son3 extends React.Component {
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}
// defaultProps 設(shè)置默認(rèn)值
Son3.defaultProps = {
    defaultTime: 3333
}

2.2 類靜態(tài)屬性聲明

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

完整示例

// props默認(rèn)值
import { func } from "prop-types";
import React from "react";
// 1.1 函數(shù)參數(shù)默認(rèn)值
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 設(shè)置默認(rèn)值
Son2.defaultProps = {
    defaultTime: 100
}
class Son3 extends React.Component {
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}
// 2.1 函數(shù) defaultProps 設(shè)置默認(rèn)值
Son3.defaultProps = {
    defaultTime: 3333
}
// 2.2 靜態(tài)屬性聲明
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;

如圖：

在這里插入圖片描述