react父子组件之间的传值

关注

原创最新推荐文章于 2026-03-24 00:38:20 发布 718 阅读 AI 写同款· GEO 优化 ›

Sentinel--哨兵系列数据下载地址及流程更新【202310】哨兵系列数据下载地址及流程更新。哨兵系列卫星作为哥白尼计划的一部分，主要目标便是对地球的观测任务。哥白尼计划由三部分组成：空间部分（哨兵系列太空任务与其他太空机构任务）、测量部分（提供海洋、大陆表面和大气信息的陆基和机载数据收集网络）、数据管理与全球共享。阅读详情

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

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