整體代碼地址：
https://github.com/klren0312/react_study/blob/master/stu15/src/Father.js
https://github.com/klren0312/react_study/blob/master/stu15/src/Son.js
一、父組件向子組件傳遞信息
將父組件的state通過props傳入子組件
父組件代碼片段
constructor(props){
super(props)
this.state={
message:"我是父組件傳來的"
}
}
render(){
return(
<div style={{background:"red",padding:"30px"}}>
<Son msg={this.state.message}/>
</div>
)
}
}
子組件代碼片段
<div>
父組件傳到子組件的信息：<span style={{background:"white"}}>{this.props.msg}</span>
</div>
效果
圖片.png
二、子組件向父組件傳遞數據
父組件代碼片段
constructor(props){
super(props)
this.state={
visible:false,
}
}
/**
* 進入
*/
goIn(){
this.setState({
visible:true
})
}
/**
* 取消
* @param mode true/false
*/
cancel(mode){
console.log(mode)
this.setState({
visible:mode
})
}
render(){
return(
<div style={{background:"red",padding:"30px"}}>
{
this.state.visible ?
<div style={{background:"yellow"}}>
<Son cancel={mode=>this.cancel(mode)}/>
</div>
:
<div style={{background:"blue"}}>
<button onClick={this.goIn.bind(this)} style={{width:"100px",height:"50px"}}>進入</button>
</div>
}
</div>
)
}
子組件代碼片段
class Son extends React.Component{
render(){
console.log(this.props.msg)
return(
<div>
<button style={{width:"100px",height:"50px"}} onClick={()=>{this.props.cancel(false)}}>返回</button>
父組件傳到子組件的信息：<span style={{background:"white"}}>{this.props.msg}</span>
</div>
)
}
}
效果
fefe.gif
