你可以有一个按钮，就像在小提琴中一样，但在侧边栏组件中。

我已经更新了小提琴

React 的美妙之处在于分离状态。我是这样想的：

1. 我想要一些全局状态（例如，在商店中）来说明侧边栏是否应该显示
2. 我希望我的侧边栏组件基于该props隐藏/显示
3. 我将从我想要的任何地方更改/切换该值，并相信该组件会相应地改变自己。

所以Parent变成了（现在将函数传递给SideBar）

var Parent = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  },
  render: function() {
    return (
      <div>
        <Header onClick={this.handleViewSidebar} />
        <SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
        <Content isOpen={this.state.sidebarOpen} />
      </div>
    );
  }
});

然后SideBar变成（添加一个调用该函数的按钮）：

var SideBar = React.createClass({
  render: function() {
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
    return (
      <div className={sidebarClass}>
        <div>I slide into view</div>
                <div>Me too!</div>
        <div>Meee Threeeee!</div>
        <button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
        </div>
    );
  }
});

我已经实现了侧抽屉，而没有使用任何这些包，如滑动抽屉或react侧边栏。

您可以在我的 GitHub 帐户GhostWolfRider 中查看Side Drawer。

输出图像供参考：

幻灯片前：

滑动后：

你可以使用 React Offcanvas 组件来让它工作。这是安装 offcanvas 组件的链接。

https://github.com/vutran/react-offcanvas