在进行开发时，我们经常需要对组件传递 props，来实现数据的动态改变。可以这样使用：

class App extends React.Component {
	render () {
		return (
			<ul>
				<li>姓名：{ this.props.name }</li>
				<li>年龄：{ this.props.age }</li>
			</ul>
		)
	}
}

export default App;

// 组件使用时是这样
let data = {
	name: "张三",
	age: 18
}
<App name={data.name} age={data.age} />

// 或者
<App {...data} />

但是，有时候我们想限制所传递的 props 的类型，或者是否必传，是否有初始值，该怎么办呢？这里需要借助一款库，就是 prop-types。在 React v15.5 之前，可以使用 React 内置的方法，即 React.PropTypes，但是在 React v15.5 之后，已经被废弃了，需要使用 prop-types 库代替。

1、安装

npm install prop-types -S

2、引入 prop-types 并使用

import PropTypes from "prop-types"

// 使用方式
组件名.PropTyps = {
	组件属性：校验格式
}

对于上面的 App 组件则可以这样写：

class App extends React.Component {
	render () {
		return (
			<ul>
				<li>姓名：{ this.props.name }</li>
				<li>年龄：{ this.props.age }</li>
			</ul>
		)
	}
}
App.propTypes = {
	name: PropTypes.string,
	age: PropTypes.number
}

// 如果想限制name属性是必传的，那么可以这样写
App.propTypes = {
	name: PropTypes.string.isRequired,
	age: PropTypes.number
}

// 如果想给age初始值，则这样写
App.defaultProps = {
	age: 18
}

export default App;

组件 props 传值及条件限制的简写：

class App extends React.Component {
	static propTypes = {
		name: PropTypes.string.isRequired,
		age: PropTypes.number
	}
	static defaultProps = {
		age: 18
	}
	render () {
		return (
			<ul>
				<li>姓名：{ this.props.name }</li>
				<li>年龄：{ this.props.age }</li>
			</ul>
		)
	}
}

export default App;

prop-types 的检验规则：

App.propTypes = {
	// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
	myPropArray: PropTypes.array,  // 数组类型
	myPropBool: PropTypes.bool,    // 布尔值
	myPropFunc: PropTypes.func,    // 函数
	myPropNumber: PropTypes.number,
	myPropObject: PropTypes.object,
	myPropString: PropTypes.string,
 
	// 可以被渲染的对象 numbers, strings, elements 或 array
	myPropNode: PropTypes.node,
 
	//  React 元素
	myPropElement: PropTypes.element,
 
	// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
	myPropMessage: PropTypes.instanceOf(Message),
 
	// 用 enum 来限制 prop 只接受指定的值。
	myPropEnum: PropTypes.oneOf(['News', 'Photos']),
 
	// 可以是多个对象类型中的一个
	myPropUnion: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
		PropTypes.instanceOf(Message)
	]),
 
	// 指定类型组成的数组
	myPropArrayOf: PropTypes.arrayOf(PropTypes.number),
 
	// 指定类型的属性构成的对象
	myPropObjectOf: PropTypes.objectOf(PropTypes.number),
 
	// 特定 shape 参数的对象
	myPropObjectWithShape: PropTypes.shape({
		color: PropTypes.string,
		fontSize: PropTypes.number
	}),
 
  // 任意类型加上 `isRequired` 来使 prop为必传项。
  myPropFunc: PropTypes.func.isRequired,

  // 不可空的任意类型
  myPropAny: PropTypes.any.isRequired,

  // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
  myCustomProp: function(props, propName, componentName) {
		if (!/matchme/.test(props[propName])) {
			return new Error('Validation failed!');
		}
  }
}