reactjs - 在 React-Redux 应用程序中 - 单击 MaterialUI 菜单的菜单项后，菜单项列表移至页面左侧

Question

我有一个包含两个菜单的应用栏。单击任一菜单的任何菜单项时，新页面呈现时菜单列表将移至页面左侧。

我的应用栏代码如下:

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

当我只使用应用栏中的一个菜单时，我没有遇到这个问题。我正在使用 MaterialUI 中的菜单、菜单项、按钮等。当呈现新页面时，为什么我的菜单向左移动？我错过了什么？

Answer 1

您需要将 Menu 的 open 属性置于 state 中，因为您可以重新渲染组件，为此不需要 redux。并且您没有切换打开状态onClose。这是工作代码和框: Menu Anchor Fixed