一、props规则校验

1.安装 prop-types 包

$ npm install prop-types

2.导入 propTypes 对象

import propTypes from 'prop-types';

3.组件名.propTypes = {} 设置组件 传参规则

Comp.propTypes = {
   param: propTypes.array  // Comp组件 的 param 参数必须是 数组类型
}

示例:

import React from 'react';
// 导入 propTypes 对象
import PropTypes from "prop-types";

// 定义子组件
const Son = ({list}) => {
    return (
        <div>
            {list.map(item => <p key={item}>{item}</p>)}
        </div>
    )
}

// 组件名.propTypes = {} 给组件设置规则
Son.PropTypes={
    // 字段设置规则
    list: PropTypes.array // Son的list参数必须是 数组形式
}

const App = () => {
    return (
        <div>
            <Son list="胡莎"/>
        </div>
    )
}

export default App;

报错:

4.官方文档链接

官方文档链接：(PropTypes 进行类型检查)

四种常见结构

• 常用类型：array、number、bool、string、func、object、symbol
• React元素类型：element
• 必填项：isRequired
• 特定的结构对象：shape({})

/* 
    属性num的类型    数值（number）
    属性fn的类型   函数（fun）并且为必填项
    属性tag的实现   React元素（element）
    属性filter的类型   对象({area:'上海'，price:1999})
*/
App.propTypes={
  num:PropTypes.number,
  fn:PropTypes.fun.isRequired,
  tag:PropTypes.element,
  filter:PropTypes.shape({
    area:PropTypes.string,
    price:PropTypes.number
  })
}

二、props默认值

1. 函数式默认值

1.1 函数式默认值

示例：

import React from "react";

// 1. 函数参数默认值
function Son({defaultNumber = 666}) {
    return (
        <div>The number is : {defaultNumber}</div>
    )
}

const App = () => {
    return (
        <div>
            <Son />
        </div>
    )
}

export default App;

例图：

1.2. defaultProps 设置默认值

示例：

import React from "react";

function Son({defaultNumber}) {
    return (
        <div>The Number is: {defaultNumber}</div>
    )
}

// 2. defaultProps 设置默认值
Son.defaultProps = {
    defaultNumber: 1000
}

const App = () => {
     return (
       <div>
         <Son />
       </div>
   )
}
export default App;

例图：

2. 类式默认值

2.1 defaultProps

class Son extends React.Component {
    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}

// defaultProps 设置默认值
Son.defaultProps = {
    defaultTime: 007
}

2.2 类静态属性声明

class Son extends React.Component {
    static defaultProps ={
        defaultTime: 66666
    }

    render() {
        return (
            <div>The defaultTimer is : {this.props.defaultTime}</div>
        )
    }
}