React父组件与子组件之间的值传递
整体代码地址:
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>
效果
二、子组件向父组件传递数据
父组件代码片段
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> ) } }