## 六、PropTypes
组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求(查看 [demo06](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html))。
> ~~~
> 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;
>
> React.render(
> <MyTitle title={data} />,
> document.body
> );
> ~~~
这样一来,title属性就通不过验证了。控制台会显示一行错误信息。
> ~~~
> Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
> ~~~
更多的PropTypes设置,可以查看[官方文档](http://facebook.github.io/react/docs/reusable-components.html)。
此外,getDefaultProps 方法可以用来设置组件属性的默认值。
> ~~~
> var MyTitle = React.createClass({
> getDefaultProps : function () {
> return {
> title : 'Hello World'
> };
> },
>
> render: function() {
> return <h1> {this.props.title} </h1>;
> }
> });
>
> React.render(
> <MyTitle />,
> document.body
> );
> ~~~
上面代码会输出"Hello World"。