react之props实现组件之间的通信

通过props属性传值有以下几种

1. 父传子 通过属性
2. 子传父 通过事件
3. 兄弟间传值 先传给父再传给兄弟

父传子

父传子时通过props属性

import React, {
    Component } from 'react'

//子组件
class Child extends Component {
    
  render() {
   
    return (
      <div>
        <h1>父亲传过来的信息：{
   this.props.title}</h1>
      </div>
    )
  }
}

//父组件
export default class ParentToParam extends Component {
   
  render() {
   
    return (
      <div>
        <h1>---------------父子传值--------------</h1>
        <Child title="来，儿砸吃🍉" ></Child>
      </div>
    )
  }
}

子传父

子传父通过事件触发的方式
1.父组件中 给子组件挂载一个自定义事件 ChildToParent

 <GreenBtn onChangeColor={
   this.changeColor}></GreenBtn>

2.子组件自己触发事件

class GreenBtn extends Component {
   
  handleClick =