🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 六、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"。