ReactJS：具有多个视图的侧边栏 [关闭]答案

【问题标题】：ReactJS: Sidebar with multiple views [closed]ReactJS：具有多个视图的侧边栏 [关闭]
【发布时间】：2015-04-22 19:34:46
【问题描述】：

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

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

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

更新：

Manuel Bitto 写了一个很好的例子，除了 URL 更改之外它还可以工作。我想举一个使用react-router 的示例，因为侧边栏包含大量内容，并且当您打开侧边栏和深入时，URL 必须更改。

【问题讨论】：

请删除put on hold。如您所见，答案可能很短。

标签： javascript animation reactjs sidebar react-router

【解决方案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

参考文献：

【讨论】：

对于初学者来说还不错;)
太好了，谢谢！使用 react-router 怎么样？在您的示例中，URL 没有改变。