React兄弟组件之间通信

兄弟组件之间通信

React是只有单项数据流动模式，也就是只能父组件的数据传递给子组件，而没有办法将子组件的数据传递给父组件。那么如果想要两个子兄弟组件通信该怎么办呢？

答案是可以通过子组件向父组件推送信息或者触发事件，然后父组件的状态会发生更新。传递到子组件的数据也会发生更改。这样两个兄弟组件就可以通过公有父组件实现通信。

让我们来去举一个具体例子，我们有一个counter组件来实现计数功能，样式大致是这样的：

公有父组件可以写成这样：

import React from 'react'
import Display from './display'
import Buttons from './buttons'

class Counter extends React.Component {
   

  constructor(props) {
   
    super(props)

    this.state = {
   
      counter: 0,
    }

    this.handleIncrement = this.handleIncrement