第09节、React组件：props属性验证--PropTypes

最新推荐文章于 2023-03-10 11:27:59 发布

DreamFive

最新推荐文章于 2023-03-10 11:27:59 发布

阅读量557

点赞数

分类专栏： React入门和组件

React入门和组件专栏收录该内容

15 篇文章 0 订阅

订阅专栏

组件的属性可以接受任意值，字符串、对象、数组、函数等等。有时候我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。

为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会在JavaScript控制台抛出警告。

ptopTypes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习React</title>
</head>
<body>
    <div id="reactContainer"></div>

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/babel">
        var MyTitle = React.createClass({
            propTypes:{
              title:React.PropTypes.string.isRequired,
            },
            render:function () {
              return <h2>{this.props.title}</h2>
            },
        });

        var data = 123;
        ReactDOM.render(
            <MyTitle title={data}/>,
            document.getElementById('reactContainer')
        );

    </script>
</body>
</html>

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。这样一来，title属性就通不过验证了。控制台会显示一行错误信息。

更多的PropTypes的设置，可以查看官方文档。

getDefaultProps默认值设置

使用getDefaultProps方法可用用来设置组件属性的默认值。

var MyTitle = React.createClass({
    propTypes:{
      title:React.PropTypes.string.isRequired,
    },
    getDefaultProps:function () {
      return  {
          title: 'hello world'
      }
    },
    render:function () {
      return <h2>{this.props.title}</h2>
    },
});

var data = '1231';
ReactDOM.render(
    <MyTitle/>,
    document.getElementById('reactContainer')
);