我希望将Appbar和抽屉分为两个组件 - 材料UI

Question

我想将Appbar和抽屉分为两个不同的组件。但是由于开放式抽屉图标和状态，我无法做到这一点。谁能帮我吗？这是https://material-ui.com/components/drawers/(迷你变体抽屉(的示例布局外观和感觉不应该改变！

试图保留并放在两个不同的组件中，但由于开放的抽屉图标

而无法执行

类标题扩展了react.component { 状态= { 开放：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>
        <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作为组件，并将抽屉状态传递到该组件作为prop -prop -

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

使用处理的质子元素将状态更改为 -

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