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 (        
            {list.map(item => 
{item}
)}        
    )}// 3. 组件名.propTypes = {} 给组件设置规则Son.PropTypes={    // 4. 各字段设置规则    list: PropTypes.array // Son的list参数必须是 数组形式}class App extends React.Component {    render() {        return (            
                            
        )    }}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 (        
The timer is : {defaultTime}
    )}class App extends React.Component {    render() {        return (            
                            
        )    }}export default App;

1.2 defaultProps 设置默认值

function Son2({defaultTime}) {    return (        
The second timer is: {defaultTime}
    )}// 2. defaultProps 设置默认值Son2.defaultProps = {    defaultTime: 100}class App extends React.Component {    render() {        return (            
                                            
        )    }}

2.类式默认值

2.1 defaultProps

class Son3 extends React.Component {    render() {        return (            
The defaultTimer is : {this.props.defaultTime}
        )    }}// defaultProps 设置默认值Son3.defaultProps = {    defaultTime: 3333}

2.2 类静态属性声明

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

完整示例

// props默认值import { func } from "prop-types";import React from "react";// 1.1 函数参数默认值function Son1({defaultTime = 10}) {    return (        
The timer is : {defaultTime}
    )}function Son2({defaultTime}) {    return (        
The second timer is: {defaultTime}
    )}// 1.2 defaultProps 设置默认值Son2.defaultProps = {    defaultTime: 100}class Son3 extends React.Component {    render() {        return (            
The defaultTimer is : {this.props.defaultTime}
        )    }}// 2.1 函数 defaultProps 设置默认值Son3.defaultProps = {    defaultTime: 3333}// 2.2 静态属性声明class Son4 extends React.Component {    static defaultProps ={        defaultTime: 66666    }    render() {        return (            
The defaultTimer is : {this.props.defaultTime}
        )    }}class App extends React.Component {    render() {        return (            
                                                                            
        )    }}export default App;

如图：

以上是"React中Props类型校验和默认值的示例分析"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！