- getInitialState 方法用于定義初始狀態(tài)威彰，使用this.state.屬性的方式讀取狀 態(tài)值肝谭。
- 當(dāng)狀態(tài)發(fā)生變化是就會(huì)調(diào)用render方法重新渲染掘宪。
- 通過(guò)this.setState()的方法改變狀態(tài)值。
- 通過(guò)this.props.屬性的方式獲取父組件傳遞給子組件的屬性或者方法攘烛。
- 子組件是不能直接修改父組件的狀態(tài)魏滚，因此父組件傳遞給子組件一個(gè)方法，子組件想要修改狀態(tài)時(shí)坟漱，只需調(diào)用父組件傳過(guò)來(lái)的方法改變父組件的狀態(tài)鼠次。
- 每一個(gè)子組件之間都是相互獨(dú)立的，當(dāng)一個(gè)組件得到一個(gè)改變是另一個(gè)組件狀態(tài)的命令， 是無(wú)法傳遞命令腥寇，因此需要將這個(gè)狀態(tài)交給他們共同的父組件成翩，讓父組件傳遞命令。
Index 標(biāo)記的是那一欄被選中的狀態(tài)赦役，當(dāng)為0是表示沒(méi)有點(diǎn)擊什么一欄麻敌。onhandleClick 方法是改變狀態(tài)的方法。
var NavigationBar = React.createClass({
getInitialState: function (){
return {index:0}
},
onhandleClick : function(myIndex){
this.setState({index:myIndex })
},
render(){
return(
<div className="nav">
<BarList msg={this.props.msg} index={this.state.index} onhandleClick={this.onhandleClick}/>
</div>);
}
}
))
BarList組件 是有多個(gè)Bar組件組成掂摔，Bar組件的個(gè)數(shù)是由父組件傳遞的msg數(shù)據(jù)確定的术羔，通過(guò)時(shí)候用Map欄循環(huán)遍歷生成Bar組件
var BarList = React.createClass({
render(){
var index=this.props.index;
var onhandleClick=this.props.onhandleClick;
var bars = this.props.msg.map(function(m){
return (<Bar icon={m.icon} onhandleClick={onhandleClick} index={index} myIndex={m.index}
name={m.name} />)
}
);
return(
<div className="bars">{bars}</div>
);
}
});
var Bar = React.createClass({
getInitialState:function(){
return({isSelect:0})
},
handleClick:function(event){
this.props.onhandleClick(this.props.myIndex)
},
onhandleOver:function(){
this.setState({isSelect:this.props.myIndex})
},
onhandleOut:function(){
this.setState({isSelect:0})
},
render(){
// 當(dāng)選中的值和父組件相同時(shí)，Index的值就是那一欄被選中
//當(dāng)鼠標(biāo)以上是狀態(tài)為1乙漓，離開(kāi)為零通過(guò)Index和IsSlecct的值確定每一欄的狀態(tài)
var style="bar";
style=this.props.index===this.props.myIndex?"bar active":"bar";
if(this.state.isSelect==0&&this.props.index!=this.props.myIndex)
style="bar"
if(this.state.isSelect!=0)
style="bar active"
return(
<div className={style}
onMouseOver={this.onhandleOver} onMouseOut={this.onhandleOut}
onClick={this.handleClick} >
<a className="bara" >
<i></i>
{this.props.name}
</a>
</div>
);
}
})```