React - 材质 UI 菜单无法正常工作

Question

我正在使用材料 ui 中的菜单/菜单项。如果我尝试根据条件渲染它似乎有问题。参考下面...

const AddSelectItemButton = () => {
    return (
        <>
        <Fab 
            aria-controls="simple-menu" 
            aria-haspopup="true" 
            onClick={handleClick} 
            className={classes.addButton} 
            size="medium" 
            color="primary" 
            aria-label="add"
        >
            <AddIcon />
        </Fab>
        <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={handleDelete}>Delete Item</MenuItem>
            <MenuItem onClick={handleAddNew}>Add Item</MenuItem>
        </Menu>
        </>
    )
}

在主容器里面我有这样的东西

return (
    <div className='my-5'>
        <Paper className="pl-5 pr-5 pb-5 position-relative"> 
            <Typography className="pt-4 mb-4 text-center" variant="h4">My Items</Typography>
            {!isAuthMode &&
                <AddSelectItemButton />
            }
            <Grid container spacing={3} justify="center">
            {allItems.items.map(item=>
                <Grid key={item.id} item xs={5} className={`mt-4`} style={{height: '200px'}}>
                        <Card className={`${classes.root} d-flex ${classes.packInner}`}>
                            <CardActionArea className="d-flex">
                                <CardMedia
                                    className={`${classes.media} ${classes.cardImage}`}
                                    image={item.image}
                                    title={item.brand}
                                />
                                <CardContent className={classes.textContainer}>
                                    <Typography gutterBottom variant="subtitle1">
                                        {item.brand}
                                    </Typography>
                                    <Typography variant="body2" color="textSecondary">
                                        {item.name}
                                    </Typography>
                                    <Typography variant="body2" color="textSecondary">
                                        Weight: {item.weight}
                                    </Typography>
                                    <Typography variant="body2" color="textSecondary" className={classes.itemDescription}>
                                        {packInfo.description.length > 80 ?
                                            (`${packInfo.description.substring(0, 77) + '...'}`)
                                            :
                                            packInfo.description
                                        }
                                    </Typography>
                                </CardContent>
                            </CardActionArea>
                        </Card>
                </Grid>
            )}
            </Grid>
        </Paper>
    </div>
);

如果我不执行条件并将代码包含在原始渲染中。菜单在按钮的位置加载。使用该条件，它会呈现页面的最左上角，而不是按钮。

有人有想法或需要更多信息吗？

谢谢！

Answer 1

{!isAuthMode && (
  <AddSelectItemButton />
)}