react.js - react如何获取兄弟组件的状态呢，应该在哪个生命周期及时获取才对？

Question

请问一下，在React组件设计的时候，想要基于条件加载组件的内容，

请问应该如何做呢？

1、比如，我在左侧的灰色区域有一个按钮，点击一下右边的sidebar就切换容器里面的UI内容。
这个是可以做到的对吗？
应该在哪个生命周期里面进行获取呢，才能及时更新UI内容？

2、左侧content组件的状态如何被右侧的rightsidebar拿到呢？
也就是说兄弟组件之间如何获取呢？我们知道可以用三方的redux等，但是这里不想要这样获取，有没有直接引用到左侧的content组件的方式直接获取？

3、是否可以rightSidebar持有左侧的content组件，到时候可以直接调用获取状态。

Answer 1

直接父级给两个子组件数据，用setState在获取数据

Answer 2

获取不了的，你把组件想象成 DOM 树，兄弟之间都是独立的，必须通过中间介质

Answer 3

在React中，要获取兄弟组件的状态，通常有以下几种方法：

1. 共享状态：你可以使用React的Context API或者Redux等状态管理库，将状态提升到父组件中，并通过props传递给各个子组件。这样，所有组件都可以访问到相同的状态。
2. 回调函数：在父组件中定义一个回调函数，然后将这个函数作为prop传递给子组件。子组件可以通过调用这个函数来更新父组件中的状态。

对于你的具体问题，有以下几种解决方案：

1. 在生命周期方法中获取：你可以在生命周期方法中获取到兄弟组件的状态。例如，在componentDidUpdate或者useEffect中都可以获取到最新的状态。
2. 使用React的Ref：你可以使用React的ref来直接引用一个组件，并直接调用它的方法或者访问它的状态。但是注意，这只能用在class组件中，不能在函数组件中使用。
3. 使用Redux或者Context API：你可以使用Redux或者Context API来全局共享状态。所有需要这个状态的组件都可以从Redux的store中获取到。

对于你的具体问题，例如点击按钮切换侧边栏的内容，可以在父组件中定义一个状态，并将这个状态和切换内容的函数作为props传递给侧边栏和内容组件。当侧边栏被点击时，就调用这个函数，更新父组件中的状态，然后父组件再将更新的状态传递给内容和侧边栏组件。这样就可以做到基于条件加载侧边栏的内容了。

对于兄弟组件之间如何获取状态的问题，如果你不想使用Redux或者Context API的话，可以考虑使用回调函数。在父组件中定义一个回调函数，然后将这个函数作为prop传递给兄弟组件。兄弟组件可以通过调用这个函数来更新父组件中的状态，从而实现兄弟组件之间的状态共享。