ReactJS: боковая панель с несколькими видами

Question

Я пытаюсь создать одностраничное приложение React.js с боковой панелью. Вот желаемый эффект:

Представьте себе, что главная страница (область с текстом settings as sidebar) имеет кнопку. Когда вы нажимаете кнопку, боковая панель отображает список элементов. Когда вы нажимаете на элемент, представление со сведениями о слайдах над списком. Представьте, что правая боковая панель работает как меню настроек iphone. Каждое действие изменяет URL (реакция-маршрутизатор).

Есть ли кто-нибудь, кто может помочь с рабочим примером? Это также вопрос о том, как организовать такое приложение при использовании React.

UPDATE:

Manuel Bitto написал хороший пример, и он работает, за исключением URL-изменения. Я хотел бы привести пример, используя react-router, потому что боковая панель содержит тяжелый контент, и URL-адрес должен измениться, когда вы открываете боковую панель и когда вы идете глубже.

Answer 1

Вот простой пример, с чего начать, обратите внимание, что это первый раз, когда я пытаюсь использовать React так что это может быть улучшено много:

<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

Ссылки:

• https://www.codementor.io/reactjs/tutorial/how-to-build-a-sliding-menu-using-react-js-and-less-css
• ReactJS: onClick handler not firing when placed on a child component