Question

请求：请帮我弄清楚当变体道具是＆＃34;临时＆＃34;时如何打开抽屉组件。

Material-UI包：@ material-ui / core

我在自己的自定义导航组件中实现了Material UI的抽屉组件。当我将变体道具作为默认＆＃34;临时＆＃34;时，我无法显示抽屉。我可以清楚地看到（在我的Chrome React插件中）＆＃34;打开＆＃34;道具确实被切换到了真实的＆＃34;但抽屉仍然没有出现。当我将变体更改为＆＃34; persistent＆＃34;抽屉确实出现了，但我更喜欢使用变体＆＃34;临时＆＃34;因为当用户点击屏幕上的任何地方时，它的默认关闭行为。

这是我的代码：

＆＃13;

import React, {Component} from 'react'
import AppBar from '@material-ui/core/AppBar';
import {Toolbar, Button} from "@material-ui/core"
import MenuIcon from '@material-ui/icons/Menu'
import IconButton from "@material-ui/core/es/IconButton/IconButton";
import Typography from "@material-ui/core/es/Typography/Typography";
import MenuItem from "@material-ui/core/es/MenuItem/MenuItem";
import Drawer from "@material-ui/core/es/Drawer/Drawer";
import ListItemText from "@material-ui/core/es/ListItemText/ListItemText";

class Nav extends Component {
	constructor() {
		super()
		this.state = {drawer: false}

		this.toggleDrawer = this.toggleDrawer.bind(this)
	}

	toggleDrawer(open) {
		debugger
		this.setState({
			drawer: open
		})
	}

	render() {
		const drawerMenu = (
			<div>
				<MenuItem><ListItemText primary="Home"></ListItemText></MenuItem>
				<MenuItem><ListItemText primary="Stock Points"></ListItemText></MenuItem>
				<MenuItem><ListItemText primary="Product Manager"></ListItemText></MenuItem>
			</div>
		)
		return (
			<div>
				<AppBar position="static">
					<Toolbar>
						<IconButton onClick={() => this.toggleDrawer(true)} color="inherit" aria-label="Menu">
							<MenuIcon />
						</IconButton>
						<Typography variant="title" color="inherit">
							{this.props.title}
						</Typography>
						<Button color="inherit">New Product</Button>
					</Toolbar>
				</AppBar>
				<Drawer open={this.state.drawer} onClose={() => this.toggleDrawer(false)} variant="temporary" keepMounted={true}>
					<div tabIndex={0} role="button" onClick={() => this.toggleDrawer(false)} onKeyDown={() => this.toggleDrawer(false)}>
						{drawerMenu}
					</div>
				</Drawer>
			</div>
		)
	}
}

export default Nav

＆＃13;

Answer 1

我现在刚遇到这个问题。在CodeSandbox上运行的代码遇到相同的问题，但在我的浏览器中却没有。帮助我的是更新package.json中的Material-ui和React版本。希望这会有所帮助！

当＆＃34;打开＆＃34;时，@ material-ui / core的DRAWER组件不会出现。 prop被设置为＆＃34; true＆＃34;

1 个答案: