ReactJS：具有多個視圖的補充工具欄

我嘗試使用側邊欄構建單頁React.js應用程序。這是預期的效果：ReactJS：具有多個視圖的補充工具欄

enter image description here

試想一下，主網頁（文字settings as sidebar區）有一個按鈕。當你點擊按鈕時，側邊欄顯示項目列表。當您點擊該項目時，包含詳細信息的視圖會滑過列表視圖。想象一下，右側的工具欄就像iphone設置菜單一樣。每個操作都會更改URL（react-router）。

有沒有人可以幫助一個工作的例子？這也是如何在使用React時組織這類應用程序的問題。

UPDATE：

曼努埃爾BITTO寫了一個很好的例子，它的作品除了URL變化。我想舉一個使用react-router的示例，因爲側邊欄包含大量內容，並且在打開側邊欄和更深入時URL必須更改。

來源

2015-04-22 xpepermint

請刪除'put on hold'。正如你所看到的答案可能很短。 – xpepermint

這是一個基本的例子，從哪裏開始，請注意，它是我第一次嘗試使用反應，以便它可以改善很多：

<script type="text/jsx"> 

var CloseMenuButton = React.createClass({ 
    render: function() { 
     return <button onClick={this.props.onClick}>{this.props.children}</button>; 
    } 
}); 

var MenuItem = React.createClass({ 
    render: function() { 
     return <div onClick={this.props.onClick} className="menu-item">{this.props.children}</div>; 
    } 
}); 

var Menu = React.createClass({ 
    getInitialState: function() { 
     return { 
      visible: false 
     }; 
    }, 

    show: function() { 
     this.setState({ visible: true }); 
    }, 

    hide: function() { 
     this.setState({ visible: false }); 
    }, 


    render: function() { 
     return <div className="menu"> 
      <div className={(this.state.visible ? "visible" : "") + " right " + this.props.type}> 
       <CloseMenuButton onClick={this.hide}>Close</CloseMenuButton> 
       {this.props.children} 
      </div> 
     </div>; 
    } 
}); 

var App = React.createClass({ 

    showMenu: function() { 
     this.refs.menu.show(); 
    }, 

    showDeeperMenu: function() { 
     this.refs.deeperMenu.show(); 
    }, 

    render: function() { 
     return <div> 
      <h1>React JS Sliding Menu</h1> 
      <button onClick={this.showMenu}>Show Menu!</button> 

      <Menu ref="menu" alignment="right" type="main-menu"> 
       <MenuItem onClick={this.showDeeperMenu}>Option 1</MenuItem> 
       <MenuItem onClick={this.showDeeperMenu}>Option 2</MenuItem> 
       <MenuItem onClick={this.showDeeperMenu}>Option 3</MenuItem> 
      </Menu> 

      <Menu ref="deeperMenu" alignment="right" type="deeper-menu"> 
       <MenuItem>Deep option 1</MenuItem> 
       <MenuItem>Deep option 2</MenuItem> 
       <MenuItem>Deep option 3</MenuItem> 
      </Menu> 

     </div>; 
    } 
}); 

React.render(<App />, document.body); 

</script>

Plunker：http://plnkr.co/edit/fojeyUjllAJ5UYejYf0m?p=preview

參考：

來源

2015-04-22 23:33:49

對第一個定時器不壞;） –

太好了，謝謝！如何使用react-router？在你的例子中，URL不會改變。 – xpepermint

ReactJS：具有多個視圖的補充工具欄

回答

相關問題