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(
      

          
      
    )
  }
}

子组件代码片段

   父组件传到子组件的信息：{this.props.msg}
  

效果

图片.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(
      

      {
        this.state.visible ?
        

          this.cancel(mode)}/>
        
        :
        

          进入
        
      }
      
    )
  }

子组件代码片段

class Son extends React.Component{
  render(){
    console.log(this.props.msg)
    return(
      

        {this.props.cancel(false)}}>返回
        父组件传到子组件的信息：{this.props.msg}
      
  
    )
  }
}

效果

fefe.gif