React JS:可折叠的侧边栏

Question

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

因此,当我单击垂直条(图形信息)时,它应该像第二张图片一样展开.我在Jsfiddle示例代码中看到了一些示例.但是在这里,他们使用静态按钮来控制崩溃.我可以使用任何图书馆吗？或者任何代码建议？

我正在学习React JS.所以任何帮助或建议将不胜感激.

Answer 1

您可以像小提琴一样使用按钮,但将其放在侧边栏组件中.

我已经更新了小提琴

React的美丽在于分离国家.我想是这样的:

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