React兄弟组件通信

1.在父组件定义好回调函数接收组件A传过来的值

// 引入组件
import SonA from "./components/SonA"
import SonB from "./components/SonB"

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      coment: "初始值"
    }
  }

  changeA = (data) => {
    this.setState({
      coment: data
    })
  }

  render () {
    return (
      <div>
        <span>这是app组件</span>
        
        {/* 兄弟组件通信 */}
        <SonA changeA={this.changeA}></SonA>
         {/* 组件A传过来的值传给组件B */}
        <SonB coment={this.state.coment}></SonB>
        <p>在根组件显示：{this.state.coment}</p>
      </div>
    )
  }
}

2.组件A通过函数回调传值给父组件

class SonA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      comA: "我是组件A的值"
    }
  }
  render () {
    return (
      <>
        <div>
          <p>我是兄弟组件A</p>
          <button onClick={this.props.changeA.bind(this, this.state.comA)}>点击传值</button>
        </div>
      </>
    )
  }
}

3.父组件接收到组件A的值，在把接收的值传给组件B

class SonB extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render () {
    return (
      <>
        <div>
          <p>我是兄弟组件B</p>
          <p>在组件B显示：{this.props.coment}</p>
        </div>
      </>
    )
  }
}