React 属性默认值和 类型检查 PropTypes的使用

属性默认值 和 类型检查

1. 属性默认值

通过一个静态属性defaultProps告知react属性默认值

A. 函数组件默认值

export default function DefineCom(props) {
    
    return (
        <div>
           a :{props.a}, b : {props.b}, c : {props.c}
        </div>
    )

}

DefineCom.defaultProps = {
    a : "1",
    b : 2,
    c : "3"
}

• 如果传递 <DefineCom a = "111"/> 这样会覆盖
• 函数组件的混合是在函数调用之前完成混合的

B . 类组件默认值

// 类使用默认值也是一样的
DefineCom.defaultProps = {
    a : "1",
    b : 2,
    c : "3"
}


//或者
static defaultProps = {
    
}

• 类组件是在构造函数之前完成混合

2. 属性类型检查

使用库：prop-types

对组件使用静态属性propTypes告知react如何检查属性

PropTypes.any：//任意类型
PropTypes.array：//数组类型
PropTypes.bool：//布尔类型
PropTypes.func：//函数类型
PropTypes.number：//数字类型
PropTypes.object：//对象类型
PropTypes.string：//字符串类型
PropTypes.symbol：//符号类型

PropTypes.node：//任何可以被渲染的内容，字符串、数字、React元素
PropTypes.element：//react元素
PropTypes.elementType：//react元素类型
PropTypes.instanceOf(构造函数)：//必须是指定构造函数的实例
PropTypes.oneOf([xxx, xxx])：//枚举
PropTypes.oneOfType([xxx, xxx]);  //属性类型必须是数组中的其中一个
PropTypes.arrayOf(PropTypes.XXX)：//必须是某一类型组成的数组
PropTypes.objectOf(PropTypes.XXX)：//对象由某一类型的值组成
PropTypes.shape(对象): //属性必须是对象，并且满足指定的对象要求
PropTypes.exact({...})：//对象必须精确匹配传递的数据

//自定义属性检查，如果有错误，返回错误对象即可
属性: function(props, propName, componentName) {
   //...
}