React JS：可摺疊邊欄

Question

我正在使用React JS創建響應式用戶界面。我想創建一個可摺疊側欄如下所示：

所以，當我點擊豎線（圖信息）應該擴大像第二張照片。我看過一些例子，如JsfiddleSample code。但是在這裏，他們使用了一個靜態按鈕來控制崩潰。有沒有我可以使用的圖書館？或者任何代碼建議？

我正在學習React JS。所以任何幫助或建議將不勝感激。

Answer 1

你可以有一個按鈕就像在小提琴中，但它在側邊欄組件。

I've updated the fiddle

的陣營美是分離的狀態。我覺得是這樣的：

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> 
    ); 
    } 
}); 

Answer 2

您可以使用React Offcanvas組件來實現這個工作。 以下是安裝offcanvas組件的鏈接。

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