您的位置：首页 > Web前端 > React

the component of reactjs

2016-09-08 16:49 369 查看

react的组件之间的传值可以有三种情况，分别是

（1）父组件——子组件主要利用props属性

（2）子组件——父组件借助于函数的传递，利用了类似的回调函数

（3）兄弟组件之间的值传递第三方思想PubSub (还有就是子1->父，父->子2)

下面的程序演示了如上三种情况

<body>
<div id="div1"></div>
<script src='react-0.14.7/build/react.js'></script>
<script src='react-0.14.7/build/react-dom.js'></script>
<script src='browser.js'></script>
<script src='PubSub.js'></script>
<script type='text/babel'>
var Commsg = React.createClass({
getInitialState:function(){
return {
<span style="white-space:pre">	</span>content:0
};
},
componentWillMount:function(){
PubSub.subscribe('select',function(msg,data){
this.setState({
content:data.value
});
}.bind(this));
},
componentWillUnmount:function(){
PubSub.unsubscribe('select');
},
render:function(){
return (
<div >你掌握的语言种类个数：{this.state.content}</div>
)
}
});
var Childcom = React.createClass({
render:function(){
var array=[];
this.props.arr.forEach(function(value,index,arr){
array.push(<label key={index}><span>{value}</span><input type='checkbox' onChange={this.props.on}/></label>);
}.bind(this));
return (<div>{array}</div>)
}
});
var Parcom = React.createClass({
getInitialState:function(){
return {
count:0
};
},
change:function(e){
this.setState({
count:e.target.checked?this.state.count+ 1:this.state.count- 1
});
},
render:function(){
var arr=['c++','java','node'];
return (
<div>
<h1 onClick={this.doChange}>the countis:{this.state.count}</h1>
<Childcom arr={arr} on={this.change}/>
</div>
);
},
doChange:function(){
PubSub.publish('select',{
value:this.state.count
});
},
});
ReactDOM.render(
<div>
<Commsg />
<Parcom />
</div>,
document.getElementById('div1')
);
</script>
</body>

react的组件化：

这张图构成了如上页面的全部，每种颜色的方框就是一个组件，也可以看出它们之间的关系，组件封装这种开发模式非常好用，极大提高了效率。

red means div1

green means Commsg

blue means Parcom

purple means Childcom

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航