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：具有多个视图的补充工具栏

回答

相关问题