第10节：React组件：props属性验证-微看VCAN

组件的属性是可以接收任何值的，但有时候我们希望对外界父级组件传递进来的属性数据进行限定，比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会在JavaScript控制台抛出警告。

PropsTypes

我们来作一个小列子，看一下PropTypes的用法。

<!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-props</title>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>

<body>
    <div id="demo"></div>
    <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('demo'));

    </script>
</body>

</html>

上面的代码，我们创建了一个组件，组件里有一个title属性。PropTypes告诉React，这个title属性是必须的，而且它的值必须是字符串。而我们在程序中却给它设置为数值。打开浏览器控制台你可以看到报错信息。

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

getDefaultProps默认值设置

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

var MyTitle = React.createClass({

    getDefaultProps:function(){
        return {
            title:'Hello JSPang'
        }
    },

    render:function(){
        return <h2>{this.props.title}</h2>
    }
})

ReactDOM.render(<MyTitle/>,document.getElementById('demo'));

浏览器这时候显示的是Hello World。

👋 感谢您的观看！

本站网络名称： 微看VCAN网

本站永久网址： https://www.dzq3.com

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END