Question

Total React noob here。我的React应用程序中有两个兄弟组件。我想在Component A

中执行某个方法时在Component B中显示正在加载的消息

我熟悉在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包装在父组件中keep the state in the parent作为单一事实。

但是，正如您在一段时间后所说的那样，在处理多个级别的组件时，这会变得乏味。你不想让国家继续下去。

我建议调查Redux（文档非常好）以及container(smart)/component(dumb) architecture。

除了上面的链接之外，我还是建议您花些时间从Redux的创作者Dan Abramov那里观看free tutorial series。

希望有所帮助！

Answer 2

首先，您说组件A是组件B的子组件，但我没有看到这两个组件之间存在任何关系。但在我看来，你可以做两件事之一。一种是将组件A作为子组件导入组件B，并将数据作为props（简单）传递给组件A.第二种方式要求您了解redux。在这种情况下，由于应用程序的大小，我没有看到必要性。但是，基本上你可以在React组件树的顶部有一个mastermind将状态传递给任何组件。因此，通过从组件B调度新数据来更新存储将使组件A能够访问数据。从大型应用程序和需要在多个地方分发的数据来看，Redux会很棒。

触发兄弟组件之间的状态更改

2 个答案: