如何使用 React Material UI 创建响应式侧边栏组件？答案

【问题标题】：How do I create a responsive sidebar component using React's Material UI?如何使用 React Material UI 创建响应式侧边栏组件？
【发布时间】：2017-10-04 22:51:30
【问题描述】：

我正在尝试使用 React Material Design 创建响应式侧边栏，但找不到方法。

侧边栏打开时页面内容应该是响应式的，并且侧边栏不应该覆盖在页面内容上。

它应该看起来像https://blackrockdigital.github.io/startbootstrap-simple-sidebar/。

目前的代码是：

import React from 'react';
    import Drawer from 'material-ui/Drawer';
    import AppBar from 'material-ui/AppBar';
    import RaisedButton from 'material-ui/RaisedButton';
    import Layout from 'material-ui/RaisedButton';

    export default class DrawerOpenRightExample extends React.Component {

        constructor(props) {
            super(props);
            this.state = {open: false};
        }

        handleToggle(){
            this.setState({open: !this.state.open});
        }

        render() {

            return (
                <div>
                    <container>
                    //will have a form here

                    <RaisedButton
                        label="Toggle Drawer"
                        onTouchTap={this.handleToggle.bind(this)}
                    />
                    </container>
                    <Drawer width={400} openSecondary={true} open={this.state.open} >
                        <AppBar title="AppBar" />
                    </Drawer>
                </div>
            );
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

标签： javascript reactjs material-ui refluxjs

【解决方案1】：

Material ui 抽屉并不真正支持此功能。您可以在 Material ui repo 上查看此问题 #4752，其中有人通过 css 实现了此功能。 https://github.com/callemall/material-ui/issues/4752

【讨论】：

【解决方案2】：

在组件中：

export default class sidebar3 extends React.Component {

constructor(props) {
    super(props);
    this.state = {open: true};
}

handleToggle(){
    this.setState({open: !this.state.open});
}

render() {
    const styles = {
            block: {
                maxWidth: 250,
            },
            toggle: {
                marginBottom: 16,
            },
            thumbOff: {
                backgroundColor: '#ffcccc',
            },
            trackOff: {
                backgroundColor: '#ff9d9d',
            },
            thumbSwitched: {
                backgroundColor: 'red',
            },
            trackSwitched: {
                backgroundColor: '#ff9d9d',
            },
            labelStyle: {
                color: 'red',
            }

    };

    return (
        <div>

            <Drawer width={'30%'}  open={this.state.open} openSecondary={true}  containerStyle={{top:'50px'}} zDepth={5}>

            <TabsExampleSimple/>

            </Drawer>
            <div className={classnames('overlayContainer', {'expanded': this.state.open})}>
                <RaisedButton
                    label="Toggle Drawer"
                    onTouchTap={this.handleToggle.bind(this)}
                />
                <Toggle
                    label="Label on the right"
                    labelPosition="right"
                    style={styles.toggle}
                    defaultToggled={true}
                    onToggle={this.handleToggle.bind(this)}

                />
                <component1/>
                <component2/>
            </div>
        </div>
    );
}

在项目css中

    .overlayContainer{
    -moz-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    left: 0;
    right:0;
    width: auto !important;
    position: fixed !important;
   }

   .overlayContainer.expanded{
    right: 32%;
   }

【讨论】：

【解决方案3】：

我对这个问题的解决方案是根据抽屉打开状态添加边距。还检查视口宽度，因此内容不会在小型设备上被挤压。

state = {
    isOpen: true,
    backdrop: false
};

contentStyle() {
    return {
        marginLeft: this.state.isOpen && this.isDocked()
            ? '256px'
            : '0px',
        transition: '0.3s'
    }
}

isDocked() {
    return window.innerWidth > 500
}

toggle() {
    this.setState({isOpen: !this.state.isOpen})
}

render() {
    return (
        <div>
            <SideMenu
                isOpen={this.state.isOpen}
                toggle={() => this.toggle()}
                isDocked={this.isDocked()}
            />
            <div style={this.contentStyle()}>
                <Navbar toggle={() => this.toggle()} />
            </div>
        </div>
    )
}

【讨论】：

【解决方案4】：

您可以使用 JavaScript 内置方法onresize。

Check the link how I did.

【讨论】：

代码在哪里？？

【解决方案5】：

看看这个。使用 javascript 内置的 onresize 方法在新窗口中打开代码输出并检查响应性。

https://codesandbox.io/s/material-demo-7ku79

【讨论】：