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

这里没有人。我的React应用程序中有两个同级组件。当在

组件B

中执行某个方法时，我想在

组件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>
    )
  }
}

导出默认类组件扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
{/*加载器*/}
{this.state.loading==true&&
}
)
}
}
导出默认类ComponentB扩展组件{
//构造函数、绑定和其他东西。。。
getData（）{
//在此处更新组件A的“加载”状态。
//获取数据后，将“加载”设置为false
}
render（）{
返回(
{/* ... */}
)
}
}

将这两个组件设置为从父组件继承状态似乎并不可取，因为我将有许多嵌套组件的同级，我还希望触发此加载程序

---

欢迎您的任何意见

在React中，数据从顶部向下流动。您需要将组件A和B包装在父级中，并作为单个真理点

然而，正如您在一段时间后所说的，当处理几个层次的组件时，这可能会变得乏味。你不想一直把州传下去

我建议调查一下（这些文件都很好）以及这些文件

除了上面的链接之外，我真的建议你花点时间从Redux的创建者丹·阿布拉莫夫那里看一看

---

希望有帮助

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

2选项，创建一个父组件（也称为容器组件），在两个同级组件之间传递消息。。或者，将状态移动到redux store并将两个同级连接到redux store，或者使用某种形式的全局状态，或者使组件从父级继承。@Varider我想我将深入redux来控制它。Tim，父母2的孩子可能会有点混乱，但我没有说a是B的孩子。我目前正在研究Redux，因为这个应用程序会升级。我很抱歉！兄弟姐妹和孩子让我很困惑。但在这种情况下，redux是最好的方法。祝你好运