日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中的Props類型校驗和默認值詳解_React

作者：前端卡卡西呀 ? 更新時間： 2022-06-02 編程語言

一、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;

如圖：

在這里插入圖片描述

總結

原文鏈接：https://blog.csdn.net/RedaTao/article/details/123826407

欄目分類
最近更新