Javascript ReactJS：具有多个视图的侧栏

我尝试构建一个带有侧边栏的单页React.js应用程序。以下是期望的效果：

假设主页（文本

设置为边栏的区域
）有一个按钮。单击按钮时，侧边栏将显示项目列表。单击项目时，带有详细信息的视图将在列表视图上滑动。假设右侧边栏的工作方式与iphone设置菜单类似。每个操作都会更改URL（反应路由器）

有没有人可以提供一个有用的例子？使用React时，如何组织此类应用程序也是一个问题

更新：

曼努埃尔·比托写了一个很好的例子，除了URL改变外，它还能工作。我想用react路由器做一个例子，因为侧边栏包含大量内容，当你打开侧边栏和深入时，URL必须改变。
这里是一个基本的例子，请注意，这是我第一次尝试使用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>


var CloseMenuButton=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var MenuItem=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var菜单=React.createClass({
getInitialState:函数（）{
返回{
可见：假
};
},
show:function（）{
this.setState（{visible:true}）；
},
隐藏：函数（）{
this.setState（{visible:false}）；
},
render:function（）{
回来
关
{this.props.children}
;
}
});
var App=React.createClass({
showMenu:function（）{
this.refs.menu.show（）；
},
showDeeperMenu:函数（）{
this.refs.deeperMenu.show（）；
},
render:function（）{
回来
反应JS滑动菜单
显示菜单！
选择1
选择2
选择3
深度选项1
深度选项2
深度选项3
;
}
});
反应(

参考资料：




这里是一个基本的例子，从哪里开始，请注意，这是我第一次尝试使用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>


var CloseMenuButton=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var MenuItem=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var菜单=React.createClass({
getInitialState:函数（）{
返回{
可见：假
};
},
show:function（）{
this.setState（{visible:true}）；
},
隐藏：函数（）{
this.setState（{visible:false}）；
},
render:function（）{
回来
关
{this.props.children}
;
}
});
var App=React.createClass({
showMenu:function（）{
this.refs.menu.show（）；
},
showDeeperMenu:函数（）{
this.refs.deeperMenu.show（）；
},
render:function（）{
回来
反应JS滑动菜单
显示菜单！
选择1
选择2
选择3
深度选项1
深度选项2
深度选项3
;
}
});
反应(

参考资料：




对于第一个计时器来说不错；）太好了，谢谢！使用react路由器怎么样？在您的示例中，URL没有变化。对于第一个计时器来说不错；）太好了，谢谢！使用react路由器怎么样？在您的示例中，URL没有更改。请删除
挂起
。如您所见，答案可能很短。请删除
暂停
。正如你所见，答案可能很简短。