Question

我有一个sidenav来跟踪通过openPath状态打开的内容。单击另一个面板时，它会折叠前一个面板并打开所单击的新面板。在我的索引页正文中，我希望有一些按钮，这些按钮可以在单击时将路径更新为sidenav上那些特定面板的路径。因此，在我的sidenav中设置状态非常有效。我也只希望单击按钮也可以从索引Page更新此openPath。

所以我的sidenav就是这样

   class Sidebar extends React.Component {
      constructor(props){
        super(props);
      const openPath = window.history.state.openPath
      this.state = {
        openPath: openPath || null
      };

      }

    handleOpen = path => {
        this.setState({openPath: path});

      };

我的sidenav在布局组件中，就像

LayOut (props) {
<SideNav/>
<Other Components/>
}

然后我的索引页调用布局组件，并且布局包装按钮。我想通过单击索引页面组件中的这些按钮之一来更新侧边栏openPath。

Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}

Answer 1

似乎您应该将数据作为props传递给子组件。

在您的情况下，这可能需要您将状态提升到SideNav组件的父组件。完成此操作后，兄弟姐妹可以与道具共享相同的值。这是React开发中的常见范例，described in the official documentation。

Answer 2

将状态保留在索引组件中，并将更新处理程序作为道具传递。每次在那里，当从侧栏中单击按钮时，布局也会重新显示

Answer 3

你能做的是

创建一个React上下文。
公开一种方法，用于从上下文提供者（在边栏中）更新openPath，例如（updateOpenPath）。
通过将updateOpenPath与按钮点击相关联来使用上下文

同级/父组件的状态更新

3 个答案: