PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

var MyTitle = React.createClass({    
propTypes: {      
title: React.PropTypes.string.isRequired,    
},      
render: function() {       
return <h1> {this.props.title} </h1>;     
}  
});  

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

var data = 123;   
ReactDOM.render(    
<MyTitle title={data} />,    
document.body  );  

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

Prop Validation

As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasonspropTypes is only checked in development mode. Here is an example documenting the different validators provided:

React.createClass({    
propTypes: {      
// You can declare that a prop is a specific JS primitive. By default, these      
// are all optional.      
optionalArray: React.PropTypes.array,      
optionalBool: React.PropTypes.bool,      
optionalFunc: React.PropTypes.func,      
optionalNumber: React.PropTypes.number,      
optionalObject: React.PropTypes.object,      
optionalString: React.PropTypes.string,        
// Anything that can be rendered: numbers, strings, elements or an array      
// (or fragment) containing these types.      
optionalNode: React.PropTypes.node,        
// A React element.      
optionalElement: React.PropTypes.element,        
// You can also declare that a prop is an instance of a class. This uses      
// JS's instanceof operator.      
optionalMessage: React.PropTypes.instanceOf(Message),        
// You can ensure that your prop is limited to specific values by treating      
// it as an enum.      
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),        
// An object that could be one of many types      
optionalUnion: React.PropTypes.oneOfType([        
React.PropTypes.string,        
React.PropTypes.number,        
React.PropTypes.instanceOf(Message)      
]),        
// An array of a certain type      
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),        
// An object with property values of a certain type      
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),        
// An object taking on a particular shape      
optionalObjectWithShape: React.PropTypes.shape({        
color: React.PropTypes.string,        
fontSize: React.PropTypes.number      
}),        
// You can chain any of the above with `isRequired` to make sure a warning      
// is shown if the prop isn't provided.      
requiredFunc: React.PropTypes.func.isRequired,        
// A value of any data type      
requiredAny: React.PropTypes.any.isRequired,        
// You can also specify a custom validator. It should return an Error      
// object if the validation fails. Don't `console.warn` or throw, as this      
// won't work inside `oneOfType`.      
customProp: function(props, propName, componentName) {        
if (!/matchme/.test(props[propName])) {          
return new Error('Validation failed!');        
}      
}    
},    
/* ... */  
});