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

Question

Total React noob 在这里。我的 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 包装在父组件中，并将 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 组件树的顶部有一个策划者来将状态传递给任何组件。因此，通过从组件 B 分派新数据来更新存储将使组件 A 能够访问数据。 Redux 非常适合大型应用程序和需要分布在多个地方的数据。