Question

我尝试使用侧边栏构建单页React.js应用程序。这是期望的效果：

enter image description here

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

有没有人可以帮助一个有效的例子？这也是关于在使用React时如何组织这种应用程序的问题。

更新

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

参考文献：

ReactJS：具有多个视图的补充工具栏

1 个答案: