React组件间通讯传值实现详解_React

import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
  constructor(){
    super()
    this.state={
      info:"天冷了要加衣"
    }
  }
  render() {
    return (
      <div>我是父组件
        {/* 注册子组件 ,通过msg传递给子组件*/}
        <ComSmall msg={this.state.info}></ComSmall>
      </div>
    )
  }
}

import React, { Component } from 'react'
export default class ComSmall extends Component {
  constructor(props){
    // 此处不传props
    super(props)
   this.state={ }
  //  console.log(this.props);此处打印的是undefined，传递后打印的是数据
  }
  render() {
    return (
      <div>我是子组件
        {/* 接收父组件传值 */}
        {this.props.msg}
      </div>
    )
  }
}

import React, { Component } from 'react'
export default class ComSmall extends Component {
  constructor(){ 
    super()
   this.state={
    msg:"给你买了一部手机"
   }
  }
  sendMsg(){
    // 子组件调用父组件传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }
  render() {
    return (
      <div>我是子组件
    <button onClick={()=>this.sendMsg()}>给父组件传值</button>
      </div>
    )
  }
}

import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
  constructor(){
    super()
    this.state={
     data:""
    }
  }
getChindMsg=(val)=>{
// console.log("获得子组件传过来的值：",val);
this.setState({
  data:val
})
} 
  render() {
    return (
      <div>我是父组件
        <p>获得子组件传过来的值：{this.state.data}</p>
        {/* 将回调函数传递给子组件 */}
        <ComSmall getMsg={this.getChindMsg}></ComSmall>
      </div>
    )
  }
}