Question

我想将AppBar和Drawer分为两个不同的组件。但是由于打开抽屉图标和状态，我无法执行此操作。谁能帮我吗？这是https://material-ui.com/components/drawers/中的示例布局（“迷你变体”抽屉）外观不应改变！

试图保留，并保留在两个不同的组件中，但由于抽屉图标打开而无法执行

class标头扩展了React.Component { 状态= { 开放：错误， };

handleDrawerOpen = () => {
    this.setState({ open: true });
};

handleDrawerClose = () => {
    this.setState({ open: false });
};

render() {
    const { classes, theme, userProfile } = this.props;

    return (
    <React.Fragment>
        <AppBar
            position="absolute"
            className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>
            <Toolbar disableGutters={!this.state.open}>
                <IconButton
                    color="inherit"
                    aria-label="Open drawer"
                    onClick={this.handleDrawerOpen}
                    className={classNames(classes.menuButton, this.state.open && classes.hide)}>
                    <MenuIcon />
                </IconButton>
                <Typography variant="title" color="inherit" noWrap className={classes.grow}>
                    Configuration Repository
                </Typography>
                <UserProfile userProfile={userProfile} />
            </Toolbar>
        </AppBar>
        <Drawer
            variant="permanent"
            classes={{
                paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
            }}
            open={this.state.open}>
            <div className={classes.toolbar}>
                <IconButton onClick={this.handleDrawerClose}>
                    {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                </IconButton>
            </div>
            <Divider />
               <List>{mailFolderListItems}</List>
            <Divider />
            <List>{otherMailFolderListItems}</List>
        </Drawer>
    </React.Fragment>
    );
}

}

Answer 1

您可以创建一个由AppBar组成的组件，并以DrawerWrapper作为组件，然后将properOpenState作为道具传递给该组件-

<div>
  <AppBar>
    <IconButton
      onClick={handleDrawerOpen}
     >
     </IconButton>
  </AppBar>
  <DrawerWrapper drawerOpen={this.state.drawerOpen} />
</div>

使用handleDrawerOpen将状态更改为-

handleDrawerOpen = () => {
    this.setState({
      drawerOpen: true
    })
  }

在DrawerWrapper组件中-

<Drawer open={this.props.drawerOpen} />

根据您的代码-

AppBar组件-

class AppBar extends Component {
    state = {
        open: false
    };

    handleDrawerOpen = () => {
        this.setState({ open: true });
    };

    handleDrawerClose = () => {
        this.setState({ open: false });
    };

    render() {
        const { classes, theme, userProfile } = this.props;

        return (
            <React.Fragment>
                <AppBar
                    position="absolute"
                    className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>
                    <Toolbar disableGutters={!this.state.open}>
                        <IconButton
                            color="inherit"
                            aria-label="Open drawer"
                            onClick={this.handleDrawerOpen}
                            className={classNames(classes.menuButton, this.state.open && classes.hide)}>
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="title" color="inherit" noWrap className={classes.grow}>
                            Configuration Repository
                        </Typography>
                        <UserProfile userProfile={userProfile} />
                    </Toolbar>
                </AppBar>
                <DrawerWrapper open={this.state.open} classes={classes} theme={theme} handleDrawerClose={this.handleDrawerClose}/>
            </React.Fragment>
        );
    }
}

DrawerWrapper组件-

class DrawerWrapper extends Component {
    render() {
        const { classes, theme, open, handleDrawerClose } = this.props;

        return (
            <Drawer
                variant="permanent"
                classes={{
                    paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
                }}
                open={open}>
                <div className={classes.toolbar}>
                    <IconButton onClick={handleDrawerClose}>
                        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                    </IconButton>
                </div>
                <Divider />
                <List>{mailFolderListItems}</List>
                <Divider />
                <List>{otherMailFolderListItems}</List>
            </Drawer>
        );
    }
}

我希望将Appbar和Drawer分为两个组件-材质UI

1 个答案: