官方提示：从React V15.5，之前的React.PropTypes会在未来版本移除，请使用 prop-types 替代。
随着应用程序的增长，你可以用类型检查找到更多错误。你可以为你的应用使用第三方类型检查库，如：Flow、TypeScript 等。你也可以不使用它们，因为React内嵌了一些类型检查功能。你可以设置组件的指定属性propTypes，为组件添加类型检查的能力。
这是个简单的类型检查的例子：
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
PropTypes
这里列出不同的验证器。
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// JS原始类型，这些全部默认是可选的
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 可以直接渲染的任何东西，可以是数字、字符串、元素或数组
optionalNode: PropTypes.node,
// React元素
optionalElement: PropTypes.element,
// 指定是某个类的实例
optionalMessage: PropTypes.instanceOf(Message),
// 可以是多个值中的一个
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 可以是多种类型中的一个
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 只能是某种类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 具有特定类型属性值的对象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 具有相同属性值的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 必选条件，可以配合其他验证器，以确保在没有提供属性的情况下发出警告
requiredFunc: PropTypes.func.isRequired,
// 必选条件，提供的属性可以为任意类型
requiredAny: PropTypes.any.isRequired,
// 自定义‘oneOfType’验证器。如果提供的属性值不匹配的它应该抛出一个异常
// 注意：不能使用‘console.warn’ 和 throw
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 自定义‘arrayOf’或者‘objectOf’验证器。
// 它会调用每个数组或者对象的key，参数前两个是对象它本身和当前key
// 注意：不能使用‘console.warn’ 和 throw
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Single Child组件
使用PropTypes.element你可以指定你的组件必须要有一个children，而且只能有一个。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// 它必须是个React元素，否则会报错
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
defaultProps中的值
设置组件的defaultProps属性，可以为props指定默认值：
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 为props指定默认值:
Greeting.defaultProps = {
name: 'Stranger'
};
// 渲染 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
defaultProps用于确保this.props.name有一个值，如果上级组件没有指定的话。props类型检查会发生在defaultProps解析之后，所以类型检查也适用于defaultProps。
