state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
--菜鸟教程
props是在调用组件的时候定义的,通过this.props来获取的。
<div id="demo"></div>
<script type="text/babel">
var Prop = React.createClass({
render:function(){
return <p>这是一个基础的{this.props.prop}</p>
}
});
ReactDOM.render(
<Prop prop='props'/>,
document.getElementById('demo')
);
</script>
输出结果:这是个一个基础的props
关于props,有默认值的。可以通过 getDefaultProps() 方法为 props 设置默认值。
var Prop = React.createClass({
getDefaultProps:function(){
return {
prop:'props',
end:'!!!',
num:1234567890
}
},
render:function(){
return <p>这是一个基础的{this.props.prop}{this.props.end}再来段数字{this.props.num}</p>
}
});
ReactDOM.render(
<Prop/>,
document.getElementById('demo')
);
输出结果:这是一个基础的props!!!再来段数字1234567890
通过两次的对比,可以看出来使用方法,在getDefaultProps()方法内,return的是个对象,写法就是js的对象写法。
虽然不能改变props但是我们可以通过state和props组合的方式。来改变现实的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title></title>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var PropsName = React.createClass({
render:function(){
return <p>{this.props.name}</p>
}
});
var PropsSite = React.createClass({
render:function(){
return <p>{this.props.site}</p>
}
});
var PropsOut = React.createClass({
getInitialState:function(){
return{
abc:true,
name:'多幸运',
site:'http://www.jinyingjie.com',
nameA:'童话',
siteA:'http://m.jinyingjie.com'
}
},
dbClick:function(event){
this.setState({abc:!this.state.abc})
},
render:function(){
var name = this.state.abc?this.state.name:this.state.nameA;
var site = this.state.abc?this.state.site:this.state.siteA;
return(
<div>
<PropsName name={name}/>
<a href={site}><PropsSite site={site}/></a>
<button type='button' onClick={this.dbClick}>点击切换歌名</button>
</div>
);
}
});
ReactDOM.render(
<PropsOut/>,
document.getElementById('demo')
);
</script>
</body>
</html>
输出效果:
点击按钮之后:
哦啦,react学习告一段落了,因为主要是看看语法,为学习react native打基础,嘿嘿。
网友评论