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

Question

我尝试构建一个带有侧边栏的单页 React.js 应用程序。这是想要的效果：

假设主页（带有文本 settings as sidebar 的区域）有一个按钮。当您单击该按钮时，侧边栏会显示一个项目列表。当您单击该项目时，带有详细信息的视图会滑过列表视图。想象一下右侧边栏就像一个 iphone 设置菜单。每个操作都会更改 URL（react-router）。

有没有人可以帮助提供一个工作示例？也是一个问题，使用React时如何组织这种app。

更新：

Manuel Bitto 写了一个很好的例子，除了 URL-changing 之外，它都有效。我想举一个使用 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>

笨蛋：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

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

ReactJS: Sidebar with multiple views

javascript

animation

sidebar

reactjs

react-router