React学习（六）PropTypes

来源：互联网发布：模型制作软件编辑：程序博客网时间：2024/05/17 01:51

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

组件类的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 方法可以用来设置组件属性的默认值。

阅读全文

1 0