В приложении React-Redux - после нажатия пункта меню меню MaterialUI список пунктов меню перемещается влево на страницу - PullRequest
Новая
       4

В приложении React-Redux - после нажатия пункта меню меню MaterialUI список пунктов меню перемещается влево на страницу

0 голосов
/ 11 сентября 2018

У меня есть панель приложений, содержащая два меню.При щелчке любого из пунктов меню любого из меню список меню смещается влево на странице при отображении новой страницы.

Мой код панели приложений выглядит следующим образом: 

const styles = theme => ({
  logo: {
    maxHeight: '80px',
    maxWidth: '100px'
  },
  logoContainer: {
    flexGrow: 1
  },
  contentBase: {
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    marginTop: theme.spacing.unit * 2,
    marginLeft: 'auto',
    marginRight: 'auto',
    width: `100%`
  },
  contentRoot: {
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    width: '100%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 2,
    marginTop: '40px'
  }
})

const mapStateToProps = (state, ownProps) => {  
  return {
    user: state.users['xyz@gmail.com'],
    auth: state.users.auth,
    profileMenuAnchorEl: state.ui.profileMenuAnchorEl,
    daoMenuAnchorEl: state.ui.daoMenuAnchorEl
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getUser: email => {
      return dispatch(getUser(email))
    },
    handleNewProposalClick: () => {
      dispatch(resetNewProposal())
      ownProps.history.push('/proposals/new')  
    },
    handleProfileMenu: (event) => {
      dispatch(handleProfileMenu(event.currentTarget))
    },
    handleCloseProfileMenu: () => {
      dispatch(handleProfileMenu(null))
    },
    handleDaoMenu: (event) => {
      dispatch(handleDaoMenu(event.currentTarget))
    },
    handleCloseDaoMenu: () => {
      dispatch(handleDaoMenu(null))
    }
  }
}

const LayoutHOC = Page => class Layout extends React.Component {

  componentDidMount() {
    // TODO : Remove hard coding
    this.props.getUser('xyz@gmail.com')
  }
  
  render () {
    
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <div className={this.props.classes.logoContainer}>
              <img src={logoImage} className={this.props.classes.logo} alt='Test' />  
            </div>
            
            <Typography>
              SEM Balance: <b>{this.props.user ? this.props.user.sem: ''}</b>
            </Typography>
            &nbsp;
            <Typography>
              REP Balance: <b>{this.props.user ? this.props.user.rep: ''}</b>
            </Typography>

            <Button
              aria-owns={Boolean(this.props.daoMenuAnchorEl) ? 'render-props-menu' : null}
              aria-haspopup="true"
              onClick={this.props.handleDaoMenu}
              color="inherit"
            >
            <ListIcon />
              DAOS
            </Button>
            <Menu 
              id="render-props-menu" 
              anchorEl={this.props.daoMenuAnchorEl}
              anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              open={Boolean(this.props.daoMenuAnchorEl)} 
              onClose={this.props.handleCloseDaoMenu}>
              <MenuItem onClick={() => this.props.history.push('/daos')}>Daos</MenuItem>
              <MenuItem onClick={() => this.props.history.push('/proposals')}>Proposals</MenuItem>
            </Menu>
              
            <Button color='inherit'
              onClick={() => {
                this.props.handleNewProposalClick()
              }}
            >
              <AddIcon />
              New Proposal
            </Button>
            { this.props.auth && (
              <div>
                <IconButton
                  aria-owns={ Boolean(this.props.profileMenuAnchorEl) ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.props.handleProfileMenu}
                  color="inherit"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={this.props.profileMenuAnchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={ Boolean(this.props.profileMenuAnchorEl) }
                  onClose={this.props.handleCloseProfileMenu}
                >
                  <MenuItem onClick={() => this.props.history.push(`/users/${this.props.user.email}`)} >Profile</MenuItem>
                  <MenuItem onClick={this.props.handleCloseProfileMenu} >My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
        <div className={this.props.classes.contentBase}>
          <div className={this.props.classes.contentRoot}>
            <div className={this.props.classes.content}>
              <Page {...this.props} /> 
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Page => withStyles(styles)(AppWrapper(
  connect(mapStateToProps, mapDispatchToProps)(LayoutHOC(Page))
))

Когда я использовал только одно меню в панели приложений, я не сталкивался с этой проблемой.Я использую Menu, MenuItem, Button и т. Д. Из MaterialUI.Когда отображается новая страница, почему мое меню перемещается влево?Чего мне не хватает?

1 Ответ

0 голосов
/ 11 сентября 2018

Вам нужно перевести открытую опору меню в состояние, так как вы можете перерисовать компонент, для этого вам не нужно использовать избыточность.И вы не переключали открытое состояние onClose.Вот рабочие коды и коробка: Исправлена ​​привязка к меню

...