1，属性默认值

通过组件的 defaultProps 静态属性设置。

1.1，函数组件

export default function FunDefault(props) {}FunDefault.defaultProps = {a: 1,b: 2,
};

1.2，类组件

export default class ClassDefault extends Component {}ClassDefault.defaultProps = {a: 1,b: 2,
};

或

export default class ClassDefault extends Component {static defaultProps = {a: 1,b: 2,};
}

无论是函数组件还是类组件，默认值和 props 都是先混合再使用。

• 函数组件，在调用之前就完成了混合。
• 类组件，在初始化的过程中完成混合，再运行构造函数。

2，属性类型验证

使用 React 官方的 prop-types 依赖进行检查。

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) {//...
}

2.1，和默认值的关系

先进行混合，在进行验证。

2.2，使用

import React, { Component } from 'react'
import PropTypes from "prop-types";export default class Validate extends Component {static defaultProps = {a: 1,};static propTypes = {a: PropTypes.number.isRequired // isRequired 表示必填。c: PropTypes.any, // 1. 可以设置必填 2. 阵型保持整齐（所有属性都在该对象中）}
}

介绍一些特殊的：

1，.node

虽然传递 null，undefined 时不会报错，那是因为直接当做没有属性传递。如果加上非空验证，就会报错了。

2，.elementType

表示组件类型。相当于传递的是组件名或构造函数本身。

注意，组件在使用时 <Comp />，其实使用的是 new 出来的组件实例。

3，.shapre

只要传递了指定的属性，那就得满足要求。其他的属性不限制。

4，.exact

相比 .shape 是精确匹配，属性不能多也不能少。

5，不能在自定义验证函数中，调用 PropTypes 自带的函数。

2.3，举例说明

import React, { Component } from 'react'
import PropTypes from "prop-types";export class A {}export default class ValidationComp extends Component {//先混合属性static defaultProps = {b: false}//再调用相应的函数进行验证static propTypes = {a: PropTypes.number.isRequired,b: PropTypes.bool.isRequired,onClick: PropTypes.func, // onClick必须是一个函数c: PropTypes.any,d: PropTypes.node.isRequired, // d必填，而且必须是一个可以渲染的内容，字符串、数字、React元素e: PropTypes.element, // e必须是一个React元素F: PropTypes.elementType, // F必须是一个组件类型g: PropTypes.instanceOf(A), // g必须是A的实例sex: PropTypes.oneOf(["男", "女"]), // 属性必须是数组当中的一个h: PropTypes.arrayOf(PropTypes.number), // 数组的每一项必须是 numberi: PropTypes.objectOf(PropTypes.number), // 对象的每一个属性值必须是 numberj: PropTypes.shape({ // 对象的属性必须满足该对象的要求。name: PropTypes.string.isRequired, age: PropTypes.number,address: PropTypes.shape({province: PropTypes.string,city: PropTypes.string})}),k: PropTypes.arrayOf(PropTypes.shape({ // 数组的元素是对象，对象又做了约束name: PropTypes.string.isRequired,age: PropTypes.number.isRequired})),m: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // 是其中一个类型即可。score: function (props, propName, componentName) { // 自定义验证条件。console.log(props, propName, componentName);const val = props[propName];// 必填if (val === undefined || val === null) {return new Error(`invalid prop ${propName} in ${componentName}，${propName} is Required`);}// 该属性必须是一个数字if (typeof val !== "number") {return new Error(`invalid prop ${propName} in ${componentName}，${propName} is not a number`);}const err = PropTypes.number.isRequired(props, propName, componentName);if(err){return err;}//并且取值范围是0~100if (val < 0 || val > 100) {return new Error(`invalid prop ${propName} in ${componentName}，${propName} must is between 0 and 100`);}}}render() {const F = this.props.F; // 必须先赋值给一个变量，才能使用。return (<div><div>{this.props.d}<F /></div></div>)}
}

使用

import React from 'react'
import ValidationComp, { A } from "./ValidationComp"
import Comp from "./Comp"
export default function App() {return (<div><ValidationCompa={2}d={<Comp />}e={<Comp />}F={Comp}g={new A()}sex="男"h={[2, 3]}i={{a: 2}}j={{a: 3,name: "abc",age: 233,address: {province: "asdfa",city: "adsfasdf"}}}k={[{name:"asdf", age:33}]}m={23}score={"33"}/></div>)
}

---

以上。