reactjs - popper 隐藏页面组件

Question

我有一个页面，侧边栏作为主要组件，页面的其余组件作为子组件，我在应用程序栏中有一个弹出按钮，我想将侧抽屉的子组件移动到左侧出现时的popper

我已经有了所有的组件，我只需要将组件移到 popper 的左侧

const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: 'flex',
  },
  flex: {
    flexGrow: 1,
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 25,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing.unit * 7 + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing.unit * 9 + 1,
    },
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
  },
});

class TaskListMain extends React.Component {
  state = {
    open: false,
    popup:false,
    anchorEl: null,
    notifier:false

  };

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

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

  handleToggle = event  => {
    const { currentTarget } = event;
    this.setState(state => ({
        anchorEl: currentTarget,
        popup: !state.popup,
      }));
  }
  handleIcon = event  => {
    const { currentTarget } = event;
    this.setState(state => ({
        anchorEl: currentTarget,
        notifier: !state.notifier,
      }));
  }

  render() {

    const { classes, theme } = this.props;
    const { anchorEl, popup, notifier } = this.state;

    let otherTask;
    let notify;

    if(this.state.popup){
        otherTask=<OtherTaskPaper/>
    }
    if(this.state.notifier){
        notify=<NotificationPaper/>
    }
    return (
      <div className={classes.root}>
        <CssBaseline/>
        <AppBar
          position="fixed"
          className={classNames(classes.appBar, {
            [classes.appBarShift]: this.state.open,
          })}style={{ background: '#00050f' }}
        >
          <Toolbar disableGutters={!this.state.open}>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerOpen}
              className={classNames(classes.menuButton, {
                [classes.hide]: this.state.open,
              })}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="title" color="inherit" className={classes.flex}>
              <a href="/"><img src="../../logo.jpg" alt="drawer" height="30px"/></a></Typography>

               <Button color="inherit" onClick={this.handleToggle}>
                   Other Tasks
        </Button>
        <Popper open={popup} anchorEl={anchorEl}>
<Paper>
            {otherTask}
            </Paper>
            </Popper>
              <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.handleIcon}>
              <Badge badgeContent={2} style={{borderColor:""}}>
          <NotificationsIcon />
          </Badge>
          </IconButton>
          <Popper open={notifier} anchorEl={anchorEl}>
<Paper>
            {notify}
            </Paper>
            </Popper>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          className={classNames(classes.drawer, {
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open,
          })}
          classes={{
            paper: classNames({
              [classes.drawerOpen]: this.state.open,
              [classes.drawerClose]: !this.state.open,
            }),
          }}
          open={this.state.open}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <Divider />
          <List>
          <ListItem button>
          <ListItemIcon>
            <AssignmentTurnedIn />
          </ListItemIcon>
          <ListItemText primary="Tasks" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DateRange/>
          </ListItemIcon>
          <ListItemText primary="TimeSheet" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <Receipt/>
          </ListItemIcon>
          <ListItemText primary="Reports" />
        </ListItem>

          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} /> 
          {this.props.children}

        </main>
      </div>
    );
  }
}

TaskListMain.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

//child components

import TaskCardComponent from './TaskCardComponent'
import TaskList from './TaskList'
const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 5,
    paddingBottom: theme.spacing.unit * 5,
    background: "grey"
  },
});

function TaskListComponents(props) {
  const { classes } = props;

  return (
    <div>
      <Paper className={classes.root} elevation={1}>
      <TaskCardComponent/>
      <TaskList/>
      </Paper>
    </div>
  );
}

TaskListComponents.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TaskListComponents);

标签： reactjsmaterial-ui

Answer 1

像我为侧抽屉所做的那样，将内容转移到一侧的书写风格

 contentShift: { 
    marginRight: popperwidth, width: `calc(100% - ${popperwidth}px)`, transition: 
    theme.transitions.create(['width', 'margin'], { easing: 
    theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, 
    }),
 },
 state = {
     open: false,
     popup:false,
     anchorEl: null,
     notifier:false,
  }; 
 handleToggle = 
    event => { 
     const { currentTarget } = event; this.setState(state => ({ anchorEl: 
    currentTarget, popup: !state.popup, }));
    }
------------------------------------------------------------------------