react父子组件之间的传值

最新推荐文章于 2025-05-16 16:20:07 发布

原创最新推荐文章于 2025-05-16 16:20:07 发布 · 687 阅读

2 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了React中父组件向子组件传递数据的方法，以及子组件如何通过回调函数更新父组件的状态，展示了具体代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父传子-------------

父组件
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>  
        )
     }
}