在vue 中，给组件传值是可以默认属性值的类型或者自定义类型的。这样方便组件使用者不容易犯错，规定组件的使用方式，那么在react 组件中，我们怎么来对属性进行类型检查呢？
通过上面官网的一段话，我们可以知道组件类型检查有两种方式：
。一个是使用静态类型检查系统，如 flow， typescripts 等
。另一种是在运行阶段使用 PropTypes
静态类型检查
我们从名字上就可以知道，静态类型是发生在代码的编写阶段，不发生在代码的运行阶段。所以我们在使用的过程中，就可以及时的提示我们代码是否存在问题等，这个的效果就和 eslint 是一样的。
由于静态类型检查是一门系统的知识，单凭一两篇博客是无法描述里面的内容，详情查看
下面我用一两段代码来感受一下：
上面那段代码是本人使用react 来封装了一个input 元素，详情，我们可以知道要三个参数，value, name, onChange
效果
PropTypes——react内置库
这个主要是使用小型项目而生的，用于检测静态属性的类型。如果不一样是在控制台报出警告的。
使用库：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) { //... }
对应的使用方式
import React, { Component } from 'react' import PropTypes from "prop-types"; export default class ValidationComp extends Component { //先混合属性 static defaultProps = { b: false } //再调用相应的函数进行验证 static propTypes = { a: PropTypes.number.isRequired, //a属性必须是一个数字类型,并且必填 b: PropTypes.bool.isRequired, //b必须是一个bool属性,并且必填 onClick: PropTypes.func, //onClick必须是一个函数 c: PropTypes.any, //1. 可以设置必填 2. 阵型保持整齐（所有属性都在该对象中） 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), //数组的每一项必须满足类型要求 i: PropTypes.objectOf(PropTypes.number), //每一个属性必须满足类型要求 j: PropTypes.shape({ //属性必须满足该对象的要求 name: PropTypes.string.isRequired, //name必须是一个字符串，必填 age: PropTypes.number, //age必须是一个数字 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]), // 自定义验证类型，这里面不能使用 PropTypes里面的方法进行验证哦 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~100 if (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> {this.props.a} <div> {this.props.d} <F /> </div> </div> ) } }
