触发同级组件之间的状态更改

Question

总反应菜鸟在这里。 我的React应用程序中有两个兄弟组件。 当Component B执行某种方法时，我想在Component A显示“正在加载”消息

我熟悉在React中将状态从父级传递到子级，但是如何通知同级显示其加载程序？

这是我到目前为止的

export default class ComponentA extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render(){
    return(
      {/* Loader */}
      { this.state.loading === true &&
        <div className="loader"></div>
      }
    )
  }
}

export default class ComponentB extends Component {  
  // Constructor, bindings and stuff...

  getData(){  
    // Update Component A's "loading" state here.
    // Once the data is fetched, set "loading" to false
  }
  render(){
    return(
       <div>
         <button onClick="this.getData"></button>
         <table>
           <tbody>
             {/* ... */}
           </tbody>
        </table>
      </div>
    )
  }
}

将两个组件都设置为从父组件继承状态似乎不是可取的，因为我将与嵌套组件有很多同级，而我也想触发此加载器

任何输入表示赞赏！

Answer 1

在React中，数据从上到下流动。 您需要将组件A和B包裹在父对象中， 并将状态保留在父对象中作为一个事实。

但是，正如您在一段时间后所说的那样，在处理几个级别的组件时，这可能变得乏味。 您不需要继续传递状态。

我建议研究Redux （文档非常出色）以及container（smart）/ component（dumb）体系结构 。

除了上面的链接，我真的建议您花些时间观看Redux的创建者Dan Abramov的免费教程系列 。

希望有帮助！

Answer 2

首先，您说组件A是组件B的子组件，但是我看不到这两个组件之间有任何关系。 但是我认为您可以做两件事之一。 一种是将组件A作为子组件导入组件B，然后将数据作为道具传递给组件A（简单）。 第二种方法要求您了解redux。 在这种情况下，由于应用程序的大小，我认为没有必要。 但是，基本上，您可以在React组件树的顶部拥有一个策划者，将状态传递给任何组件。 因此，通过分派来自组件B的新数据来更新存储，将使组件A能够访问该数据。 对于大型应用程序和需要在多个位置分发的数据，Redux会很棒。