当“open”属性设置为“true”时，@material-ui/core 的 DRAWER 组件不会出现

Question

请求：请帮我弄清楚当变体道具是“临时”时如何让抽屉组件打开。

Material-UI 包：@material-ui/core

我在自己的自定义导航组件中实现了 Material UI 的抽屉组件。当我将变体道具保留为默认的“临时”时，我无法让抽屉出现。我可以清楚地看到（在我的 Chrome React 插件中）“open”道具确实被切换为“true”，但抽屉仍然没有出现。当我将变体更改为“持久”时，抽屉确实会出现，但我更喜欢使用变体“临时”，因为它的默认行为是在用户单击屏幕上的任意位置时关闭。

这是我的代码：

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

Answer 1

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