React父组件与子组件之间的值传递

妖狐艹你老母 2021-09-17 12:18 380阅读 0赞

> 整体代码地址：  
> [https://github.com/klren0312/react\_study/blob/master/stu15/src/Father.js][https_github.com_klren0312_react_study_blob_master_stu15_src_Father.js]  
> [https://github.com/klren0312/react\_study/blob/master/stu15/src/Son.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>

效果

![Image 1][]

图片.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>  
        )
      }
    }

效果

![Image 1][]

作者：治电小白菜  
链接：https://www.jianshu.com/p/8b845f05cf4b  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_github.com_klren0312_react_study_blob_master_stu15_src_Father.js]: https://link.jianshu.com?t=https://github.com/klren0312/react_study/blob/master/stu15/src/Father.js
[https_github.com_klren0312_react_study_blob_master_stu15_src_Son.js]: https://link.jianshu.com?t=https://github.com/klren0312/react_study/blob/master/stu15/src/Son.js
[Image 1]: