Javascript 如何使用React'；什么是材料界面？

我正在尝试使用react材质设计创建响应性侧栏，但找不到方法

侧边栏打开时，页面内容应具有响应性，侧边栏不应覆盖在页面内容上

应该是这样的

到目前为止，守则是：

从“React”导入React；
从“物料界面/抽屉”导入抽屉；
从“物料ui/AppBar”导入AppBar；
从“物料界面/RaisedButton”导入RaisedButton；
从“物料ui/RaisedButton”导入布局；
导出默认类DrawerPropertyRightExample扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={open:false}；
}
手语{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
//我这里有一张表格
);
}
}

---

材质ui抽屉实际上不支持此功能。 您可以在material ui repo上查看此问题，其中有人通过css实现了此功能。

在组件中：

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>
    );
}

---

我解决这个问题的方法是根据抽屉打开状态增加边距。还要检查视口宽度，以便内容不会在小型设备上挤压

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>
    )
}

状态={
是的，
背景：假
};
contentStyle（）{
返回{
marginLeft:this.state.isOpen&&this.isDocked（）
“256px”
：“0px”，
过渡：“0.3s”
}
}
isDocked（）{
返回窗口。内部宽度>500
}
切换（）{
this.setState（{isOpen:！this.state.isOpen}）
}
render（）{
返回(
this.toggle（）}
isDocked={this.isDocked（）}
/>
this.toggle（）}/>
)
}

您可以使用JavaScript内置方法

onresize

---

.

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

---

代码在哪里？？

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>
    )
}