React学习（六）PropTypes

发布时间：2020-12-15 07:11:56 所属栏目：百科来源：网络整理

导读：组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。 html head meta charset="UTF-8" / titleHello React!/

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!