组件的属性是可以接收任何值的,但有时候我们希望对外界父级组件传递进来的属性数据进行限定,比如希望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
请登录后发表评论
注册
社交帐号登录