一、概述

props是React组件接收的外部参数，相当于是组件暴露给外部的接口。PropTypes的作用更多的是一种文档性质的限制，通过给每个props属性设置对应的PropTypes来提示开发者和使用者组件对外暴露的接口限制。本文同时介绍了defaultProps的使用方法。

二、PropTypes

从React 15.5版本开始，PropTypes由prop-types三方件提供。使用命令npm i -D prop-types安装。React 15.5之前的版本PropTypes由react提供，不需要安装。

（一）基本使用方法

export const SMALL = 'small';
export const NORMAL = 'normal';
export const LARGE = 'large';
const SIZE = {small: { width: '32px', height: '16px' },normal: { width: '64px', height: '32px' },large: { width: '96px', height: '64px' },
};export const Button = ({ text, size }) => (<button style={SIZE[size] || SIZE[SMALL]}>{text}</button>
);

以上代码实现了一个按钮，接收两个参数：text和size，text用来定义按钮的文本，size用来定义按钮的大小，提供了三种可选的大小。从它们的含义上看，text要求是字符串，size要求是组件提供的枚举值，但是如果不按这个要求传参，代码也不会有任何形式的报错。这样对于不熟悉这个组件的开发者来说不太友好，也不利于项目开发和维护。

用PropTypes对参数的类型加以限制：

import PropTypes from 'prop-types';export const SMALL = 'small';
export const NORMAL = 'normal';
export const LARGE = 'large';
const SIZE = {small: { width: '32px', height: '16px' },normal: { width: '64px', height: '32px' },large: { width: '96px', height: '64px' },
};export const Button = ({ text, size }) => (<button style={SIZE[size] || SIZE[SMALL]}>{text}</button>
);Button.propTypes = {/** 按钮文本 */text: PropTypes.string,/** 按钮大小 */size: PropTypes.oneOf([SMALL, NORMAL, LARGE]),
};

这样如果在使用时没有按要求传参，比如size传错了，不是规定的枚举值之一：

import { Button } from './Button.jsx';
import './App.css';function App() {return (<div className="App"><Button text={'按钮'} size={1} /></div>);
}export default App;

控制台会报错：

但是并不会影响代码的执行，也不会抛出异常，所以PropTypes的限制更多的是一种文档性质的提示。这类控制台提示只在开发模式下起作用，在项目最后以发布模式打包的时候不会把这个功能打包进去。

（二）PropTypes的类型

数组：PropTypes.array
布尔值：PropTypes.bool
函数：PropTypes.func
数值：PropTypes.number
对象：PropTypes.object
字符串：PropTypes.string
symbol：PropTypes.symbol
任何可被渲染的元素：PropTypes.node
一个React元素：PropTypes.element
一个指定的React元素类型：PropTypes.elementType
一个指定类型的实例：PropTypes.instanceOf(Message)
枚举值：PropTypes.oneOf([‘News’, ‘Photos’])
指定类型中的任意一个类型实例：PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ])
由某一类型元素组成的数组：PropTypes.arrayOf(PropTypes.number)
由某一类型的值组成的对象：PropTypes.objectOf(PropTypes.number)
指定对象由特定的类型值组成：PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number })
指定对象必须提供指定属性和指定类型：PropTypes.exact({ name: PropTypes.string, quantity: PropTypes.number })
在任何PropTypes属性后面加上isRequired可以使该属性未被提供时，打印警告信息：PropTypes.func.isRequired

三、defaultProps

defaultProps用于给props提供默认值，比如为Button的size属性设置一个默认值：

import PropTypes from 'prop-types';export const SMALL = 'small';
export const NORMAL = 'normal';
export const LARGE = 'large';
const SIZE = {small: { width: '32px', height: '16px' },normal: { width: '64px', height: '32px' },large: { width: '96px', height: '64px' },
};export const Button = ({ text, size }) => (<button style={SIZE[size] || SIZE[SMALL]}>{text}</button>
);Button.defaultProps = {size: NORMAL
};Button.propTypes = {/** 按钮文本 */text: PropTypes.string,/** 按钮大小 */size: PropTypes.oneOf([SMALL, NORMAL, LARGE]),
};

这样当size未传参的时候Button也可以有默认的normal的大小。

四、defaultProps和PropTypes配合的注意事项

只能给没有标记PropTypes.isRequired的属性赋defaultProps，否则会导致isRequired的检查不生效。
defaultProps的赋值也要满足对应PropTypes的要求，否则控制台也会提示不匹配，PropTypes的检查是在defaultProps赋值之后才做的。
对于PropTypes.isRequired的props，由于不能赋默认值，在代码中就要做非空判断。这样既能使isRequired检查生效，又不至于使代码抛异常。对于不是isRequired的属性，在设置了defaultProps之后，代码中就可以不做非空判断了。

五、参考资料

React关于PropTypes的官方文档：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

React的Props检查：PropTypes相关推荐

模块开发之React使用第三方库PropTypes属性限制(十二)
模块开发之React使用第三方库PropTypes属性限制(十二) 前言这是一个纯配置的第三方库模块,所以我们需要掌握知识不需要太详细.能知道并拿来即用即可. 下面以使用该模块的背景展开,然后介绍使 ...
React的Props校验与默认值
React的Props使用 React的props校验一.使用步骤: props校验需要先安装prop-types这个库 npm i -S prop-types 引用prop-types imp ...
React - children props 与 render props
React - children props 与 render props 一. children props 1. 函数组件形式 2. 类组件形式二. render props 1. 函数组件形式 ...
react路由props
react路由props 一.match匹配的路由 1.params 路由的参数 (!!!) 2.isExact 是否精确匹配 3.path路径 4.url地址 (!!!) 二.history 历史记 ...
【React】Props
向组件传递参数(Props) Passing Props to a Component | React 中文文档 | React 中文网 props 就是用于和其他组件交流,父组件都可以传递信息给子组 ...
前端学习（2307）：react之props和state
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
React Render props
首先打个广告,系列文章: 古老的React mixins HOC(高阶组件) render props React Hooks 下面进入正题: 什么是Render props A render pro ...
react中props详解
1.props的基本使用 react组件之间的传值,是离不开props的代码展示: export default class Parent extends Component {render() { ...
react的props效验规则
需要安装prop-types yarn add prop-types import React, { Component } from 'react'; import PropTypes from ' ...

React的Props检查：PropTypes