第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。

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

THE END

React基础学习教程
# React入门教程

第10节：React组件：props属性验证

请登录后发表评论

微看VCAN网邀请您的DiscuzQ站点加入Q站案例库