React JS:可折叠侧边栏 [英] React JS: Collapsible sidebar

问题描述

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

I am using React JS to create a responsive UI. I want to create a collapsible sidebar like the following:

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

So when I click the vertical bar(Graph information) it should expand like the second picture. I have seen some example like in JsfiddleSample code .But here, they have used a static button to control the collapse. Is there any library that I can use? Or any code suggestion?

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

I am learning React JS. So any help or suggestion will be appreciated.

推荐答案

您可以像在小提琴中一样拥有一个按钮，但在侧边栏组件中具有它.

You can have a button just like in the fiddle, but have it in the sidebar component.

我已经更新了小提琴

React的美丽在于分离状态.我是这样想的:

The beauty of React is separating the state. I think like this:

1. 我想要一些全局状态(例如在商店中)，该状态说明边栏是否应该显示
2. 我希望我的侧边栏组件基于该道具隐藏/显示
3. 我将在需要的任何地方更改/切换该值，并相信该组件将相应地进行更改.

因此 Parent 成为了(现在将函数传递给 SideBar )

So Parent becomes (now passing in the function to the 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 变为(添加一个调用该函数的按钮):

and the SideBar becomes (adding a button that calls that function):

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 JS:可折叠侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！