Javascript 如何在不同类中关闭swipeabledrawer

我对Material ui网站上的SwipeableDrawer解释有点困惑。基本上，我有一个组件“边栏”，如果用户单击应用程序栏上的按钮，或者用户滑动打开边栏，它会打开一个SwipeableDrawer

在appbar中有一个可以按下的按钮，该按钮将传递给父组件

// Topbar.js
<IconButton color="inherit" onClick={onSidebarOpen}>
   <MenuIcon/>
</IconButton>

// Main.js
<Topbar onSidebarOpen={this.handleSidebarOpen}/>

HandelSideBarpen方法设置边栏是打开还是关闭的状态。所以现在的问题是，如果用户打开抽屉，我不能完全确定如何正确地告诉侧边栏打开或关闭抽屉

我使用了这种方法

<Sidebar
  open={this.state.openSidebar}
  onClose={this.handleSidebarClose}
/>

然后在侧边栏课上我做了这个

// Inside render method
const {open, onClose} = this.props;

return (
  <SwipeableDrawer
        open={open}
        onOpen={event => this.showDrawer(event)}
        onClose={onClose}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
      >
        {console.log(onClose)}
        {this.fullList()}
  </SwipeableDrawer>
);

如果你不理解这个问题，请随时要求我澄清。我做了一个小演示来说明这个问题

试着打开侧边栏，看看会发生什么。提前感谢。

只需在Main.js文件的侧栏中传递handleSidebarOpen方法

<Sidebar
   open={this.state.openSidebar}
   onOpen={this.handleSidebarOpen}
   onClose={this.handleSidebarClose}
/>

在Sidebar.js中获取该函数，并在SwipeableDrawer的onOpen属性上使用它。如下图所示

const { open, onOpen, onClose } = this.props;

return (
      <SwipeableDrawer
        open={open}
        onOpen={onOpen}
        onClose={onClose}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
      >
        {console.log(onClose)}
        {this.fullList()}
      </SwipeableDrawer>
    );

我也为你们创造了沙盒