Javascript 物料Ui弹出框位置不正确

我正在与react合作一个web应用程序项目。在这里，我为导航栏使用了材质ui。移动设备右侧有一个显示更多图标。但当我打开它时，弹出窗口在左侧打开，显示了一个错误的材料界面：提供给组件的

anchorEl

道具无效。我想把它放在右上方。但我做不到。我该怎么办

这是密码

import React, { useState } from 'react';
import './Navbar.css'
import { useScrollTrigger, Slide, AppBar, Toolbar, IconButton, makeStyles, Divider, List, ListItem, ListItemIcon, ListItemText, Hidden, Drawer, useTheme, Menu, MenuItem } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import MoreIcon from '@material-ui/icons/MoreVert';
import Logo from '../../images/logo.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
    toolbar: theme.mixins.toolbar,
    grow: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    sectionDesktop: {
        display: 'none',
        [theme.breakpoints.up('md')]: {
            display: 'flex',
        },
    },
    sectionMobile: {
        display: 'flex',
        [theme.breakpoints.up('md')]: {
            display: 'none',
        },
    },
    drawer: {
        [theme.breakpoints.up('sm')]: {
            width: drawerWidth,
            flexShrink: 0,
        },
    },
    drawerPaper: {
        width: drawerWidth,
    },
}));

const Navbar = (props) => {
    const { window } = props;
    const classes = useStyles();
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = useState(false);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
    console.log(mobileMoreAnchorEl);

    const HideOnScroll = (props) => {
        const { children, window } = props;
        const trigger = useScrollTrigger({ target: window ? window() : undefined });
        return (
            <Slide appear={false} direction="down" in={!trigger}>
                {children}
            </Slide>
        )
    }

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    const handleMobileMenuClose = () => {
        setMobileMoreAnchorEl(null);
    }

    const handleMobileMenuOpen = (event) => {
        setMobileMoreAnchorEl(event.currentTarget);
    }

    const mobileMenuId = 'primary-search-account-menu-mobile';
    const renderMobileMenu = (
        <Menu
            anchorEl={mobileMoreAnchorEl}
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            id={mobileMenuId}
            keepMounted
            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            open={isMobileMenuOpen}
            onClose={handleMobileMenuClose}
        >
            <MenuItem>
                <IconButton color="inherit">
                    <FontAwesomeIcon icon={faGithub} />
                </IconButton>
            </MenuItem>
            <MenuItem>
                <IconButton color="inherit">
                    <FontAwesomeIcon icon={faLinkedinIn} />
                </IconButton>
            </MenuItem>
        </Menu>
    );

    const drawer = (
        <div>
            <div className={classes.toolbar} />
            <Divider />
            <List>
                {['GitHub', 'Started', 'Send email', 'Drafts'].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))}
            </List>
        </div>
    )

    const container = window !== undefined ? () => window().document.body : undefined;

    return (
        <div className={classes.grow}>
            <div>
                <HideOnScroll {...props}>
                    <AppBar>
                        <Toolbar>
                            <IconButton
                                edge="start"
                                className={classes.menuButton}
                                color="inherit"
                                aria-label="open drawer"
                                onClick={handleDrawerToggle}
                            >
                                <MenuIcon />
                            </IconButton>
                            <img className="logo" src={Logo} alt="" />
                            <div className={classes.grow} />
                            <div className={classes.sectionDesktop}>
                                <a style={{ textDecoration: 'none' }} href="https://github.com/muhidhossain">
                                    <IconButton style={{ color: 'aqua', outline: 'none' }}>
                                        <FontAwesomeIcon icon={faGithub} />
                                    </IconButton>
                                </a>
                                <IconButton style={{ color: 'aqua', outline: 'none' }}>
                                    <FontAwesomeIcon icon={faLinkedinIn} />
                                </IconButton>
                            </div>
                            <div className={classes.sectionMobile}>
                                <IconButton
                                    aria-label="show more"
                                    aria-controls={mobileMenuId}
                                    aria-haspopup="true"
                                    onClick={handleMobileMenuOpen}
                                    color="inherit"
                                >
                                    <MoreIcon />
                                </IconButton>
                            </div>
                        </Toolbar>
                    </AppBar>
                </HideOnScroll>
                {renderMobileMenu}
            </div>
            <nav className={classes.drawer} aria-label="mailbox folders">
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{ paper: classes.drawPaper }}
                        ModalProps={{ keepMounted: true }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
        </div>
    );
};

export default Navbar;

import React，{useState}来自“React”；
导入“./Navbar.css”
从“@material ui/core”导入{UseCollTrigger、幻灯片、应用程序栏、工具栏、图标按钮、makeStyles、分隔符、列表、列表项、列表项图标、列表项文本、隐藏、抽屉、useTheme、菜单、菜单项}；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
从“@material ui/icons/MoreVert”导入MoreIcon；
从“../../images/Logo.png”导入徽标；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free brands svg icons”导入{faGithub，falinkedin}；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
工具栏：theme.mixins.toolbar，
成长：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
部分桌面：{
显示：“无”，
[主题.breakpoints.up（'md'）]：{
显示：“flex”，
},
},
sectionMobile：{
显示：“flex”，
[主题.breakpoints.up（'md'）]：{
显示：“无”，
},
},
出票人：{
[theme.breakpoints.up（'sm'）：{
宽度：抽屉宽度，
flexShrink:0，
},
},
抽屉纸：{
宽度：抽屉宽度，
},
}));
常量导航栏=（道具）=>{
const{window}=props；
const classes=useStyles（）；
const theme=useTheme（）；
const[mobileOpen，setMobileOpen]=useState（false）；
const[mobileMoreAnchorEl，setMobileMoreAnchorEl]=useState（null）；
控制台日志（MobileMorenal）；
常量HideOnScroll=（道具）=>{
const{children，window}=props；
const trigger=useCrollTrigger（{target:window？window（）：undefined}）；
返回(
{儿童}
)
}
常量handleDrawerToggle=（）=>{
setMobileOpen（！mobileOpen）；
};
常量IsMobilElemenuOpen=布尔值（mobileMoreAnchorEl）；
常量handleMobileMenuClose=（）=>{
setMobileMoreAnchorEl（空）；
}
常量handleMobileMenuOpen=（事件）=>{
setMobileMoreAnchorEl（event.currentTarget）；
}
const mobileMenuId='主要搜索帐户菜单移动'；
常数rendermobileemenu=(
);
常数抽屉=(
{['GitHub'，'Started'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
)
const container=window！==未定义？（）=>window（）.document.body:未定义；
返回(
{rendermobileemenu}
{抽屉}
);
};
导出默认导航栏；

HideOnScroll组件正在创建此问题。对于每次重新渲染，都会重新创建组件。当主播指向不再存在的HTML元素时，它会抛出一个错误。如果我们将组件移到导航栏组件之外，问题将得到解决

import React, { useState } from 'react';
import './Navbar.css'
import { useScrollTrigger, Slide, AppBar, Toolbar, IconButton, makeStyles, Divider, List, ListItem, ListItemIcon, ListItemText, Hidden, Drawer, useTheme, Menu, MenuItem } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import MoreIcon from '@material-ui/icons/MoreVert';
import Logo from '../../images/logo.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
    toolbar: theme.mixins.toolbar,
    grow: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    sectionDesktop: {
        display: 'none',
        [theme.breakpoints.up('md')]: {
            display: 'flex',
        },
    },
    sectionMobile: {
        display: 'flex',
        [theme.breakpoints.up('md')]: {
            display: 'none',
        },
    },
    drawer: {
        [theme.breakpoints.up('sm')]: {
            width: drawerWidth,
            flexShrink: 0,
        },
    },
    drawerPaper: {
        width: drawerWidth,
    },
}));

    const HideOnScroll = (props) => {
        const { children, window } = props;
        const trigger = useScrollTrigger({ target: window ? window() : undefined });
        return (
            <Slide appear={false} direction="down" in={!trigger}>
                {children}
            </Slide>
        )
    }

const Navbar = (props) => {
    const { window } = props;
    const classes = useStyles();
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = useState(false);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
    console.log(mobileMoreAnchorEl);

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    const handleMobileMenuClose = () => {
        setMobileMoreAnchorEl(null);
    }

    const handleMobileMenuOpen = (event) => {
        setMobileMoreAnchorEl(event.currentTarget);
    }

    const mobileMenuId = 'primary-search-account-menu-mobile';
    const renderMobileMenu = (
        <Menu
            anchorEl={mobileMoreAnchorEl}
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            id={mobileMenuId}
            keepMounted
            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            open={isMobileMenuOpen}
            onClose={handleMobileMenuClose}
        >
            <MenuItem>
                <IconButton color="inherit">
                    <FontAwesomeIcon icon={faGithub} />
                </IconButton>
            </MenuItem>
            <MenuItem>
                <IconButton color="inherit">
                    <FontAwesomeIcon icon={faLinkedinIn} />
                </IconButton>
            </MenuItem>
        </Menu>
    );

    const drawer = (
        <div>
            <div className={classes.toolbar} />
            <Divider />
            <List>
                {['GitHub', 'Started', 'Send email', 'Drafts'].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))}
            </List>
        </div>
    )

    const container = window !== undefined ? () => window().document.body : undefined;

    return (
        <div className={classes.grow}>
            <div>
                <HideOnScroll {...props}>
                    <AppBar>
                        <Toolbar>
                            <IconButton
                                edge="start"
                                className={classes.menuButton}
                                color="inherit"
                                aria-label="open drawer"
                                onClick={handleDrawerToggle}
                            >
                                <MenuIcon />
                            </IconButton>
                            <img className="logo" src={Logo} alt="" />
                            <div className={classes.grow} />
                            <div className={classes.sectionDesktop}>
                                <a style={{ textDecoration: 'none' }} href="https://github.com/muhidhossain">
                                    <IconButton style={{ color: 'aqua', outline: 'none' }}>
                                        <FontAwesomeIcon icon={faGithub} />
                                    </IconButton>
                                </a>
                                <IconButton style={{ color: 'aqua', outline: 'none' }}>
                                    <FontAwesomeIcon icon={faLinkedinIn} />
                                </IconButton>
                            </div>
                            <div className={classes.sectionMobile}>
                                <IconButton
                                    aria-label="show more"
                                    aria-controls={mobileMenuId}
                                    aria-haspopup="true"
                                    onClick={handleMobileMenuOpen}
                                    color="inherit"
                                >
                                    <MoreIcon />
                                </IconButton>
                            </div>
                        </Toolbar>
                    </AppBar>
                </HideOnScroll>
                {renderMobileMenu}
            </div>
            <nav className={classes.drawer} aria-label="mailbox folders">
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{ paper: classes.drawPaper }}
                        ModalProps={{ keepMounted: true }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
        </div>
    );
};

export default Navbar;

import React，{useState}来自“React”；
导入“./Navbar.css”
从“@material ui/core”导入{UseCollTrigger、幻灯片、应用程序栏、工具栏、图标按钮、makeStyles、分隔符、列表、列表项、列表项图标、列表项文本、隐藏、抽屉、useTheme、菜单、菜单项}；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
从“@material ui/icons/MoreVert”导入MoreIcon；
从“../../images/Logo.png”导入徽标；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free brands svg icons”导入{faGithub，falinkedin}；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
工具栏：theme.mixins.toolbar，
成长：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
部分桌面：{
显示：“无”，
[主题.breakpoints.up（'md'）]：{
显示：“flex”，
},
},
sectionMobile：{
显示：“flex”，
[主题.breakpoints.up（'md'）]：{
显示：“无”，
},
},
出票人：{
[theme.breakpoints.up（'sm'）：{
宽度：抽屉宽度，
flexShrink:0，
},
},
抽屉纸：{
宽度：抽屉宽度，
},
}));
常量HideOnScroll=（道具）=>{
const{children，window}=props；
const trigger=useCrollTrigger（{target:window？window（）：undefined}）；
返回(
{儿童}
)
}
常量导航栏=（道具）=>{
const{window}=props；
const classes=useStyles（）；
const theme=useTheme（）；
常数[mobileOpen，setMo