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

Question

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

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

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

更新:

曼努埃尔比托写了一个很好的例子,它除了改变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处理程序不会触发