组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。
<html> <head> <Meta charset="UTF-8" /> <title>Hello React!</title> <script src="D:/ReactDom/build/react.min.js"></script> <script src="D:/ReactDom/build/react-dom.min.js"></script> <script src="D:/ReactDom/build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var data = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isrequired,},render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={data} />,document.getElementById('example') ); </script> </body> </html>上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。
这样一来,title属性就通不过验证了。控制台会显示一行错误信息。
更多的PropTypes设置,可以查看官方文档。 此外,getDefaultProps 方法可以用来设置组件属性的默认值。