React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Props

React中的Props类型校验和默认值详解

作者:前端卡卡西呀

这篇文章主要为大家详细介绍了React中的Props类型校验和默认值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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

报错提示如下:

在这里插入图片描述

四种常见结构

核心代码:

// 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;

如图:

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:
阅读全文