javascript - react JS : Collapsible sidebar

Question

我正在使用 React JS 创建响应式 UI。我想创建一个可折叠的边栏，如下所示:

所以当我点击垂直条(图表信息)时，它应该像第二张图片一样展开。我在 Jsfiddle Sample code 中看到了一些例子但是在这里，他们使用了静态按钮来控制折叠。有没有我可以使用的图书馆？或者任何代码建议？

我正在学习 React JS。因此，我们将不胜感激任何帮助或建议。

Answer 1

您可以像在 fiddle 中一样拥有一个按钮，但将其放在侧边栏组件中。

I've updated the fiddle

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

1. 我想要一些全局状态(比如在商店中)来说明侧边栏是否应该显示
2. 我希望我的侧边栏组件根据该 Prop 隐藏/显示
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>
    );
  }
});