Javascript 使用材质ui appbar时钩子调用无效

为了构建一个简单的应用程序栏，我从material ui站点复制了以下组件代码：

import React from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';

const useStyles = makeStyles((theme) => ({
 grow: {
   flexGrow: 1,
 },
 menuButton: {
   marginRight: theme.spacing(2),
 },
 title: {
   display: 'none',
   [theme.breakpoints.up('sm')]: {
     display: 'block',
   },
 },
 search: {
   position: 'relative',
   borderRadius: theme.shape.borderRadius,
   backgroundColor: fade(theme.palette.common.white, 0.15),
   '&:hover': {
     backgroundColor: fade(theme.palette.common.white, 0.25),
   },
   marginRight: theme.spacing(2),
   marginLeft: 0,
   width: '100%',
   [theme.breakpoints.up('sm')]: {
     marginLeft: theme.spacing(3),
     width: 'auto',
   },
 },
 searchIcon: {
   padding: theme.spacing(0, 2),
   height: '100%',
   position: 'absolute',
   pointerEvents: 'none',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 },
 inputRoot: {
   color: 'inherit',
 },
 inputInput: {
   padding: theme.spacing(1, 1, 1, 0),
   // vertical padding + font size from searchIcon
   paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
   transition: theme.transitions.create('width'),
   width: '100%',
   [theme.breakpoints.up('md')]: {
     width: '20ch',
   },
 },
 sectionDesktop: {
   display: 'none',
   [theme.breakpoints.up('md')]: {
     display: 'flex',
   },
 },
 sectionMobile: {
   display: 'flex',
   [theme.breakpoints.up('md')]: {
     display: 'none',
   },
 },
}));

export default function PrimarySearchAppBar() {
 const classes = useStyles();
 const [anchorEl, setAnchorEl] = React.useState(null);
 const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

 const isMenuOpen = Boolean(anchorEl);
 const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

 const handleProfileMenuOpen = (event) => {
   setAnchorEl(event.currentTarget);
 };

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

 const handleMenuClose = () => {
   setAnchorEl(null);
   handleMobileMenuClose();
 };

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

 const menuId = 'primary-search-account-menu';
 const renderMenu = (
   <Menu
     anchorEl={anchorEl}
     anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
     id={menuId}
     keepMounted
     transformOrigin={{ vertical: 'top', horizontal: 'right' }}
     open={isMenuOpen}
     onClose={handleMenuClose}
   >
     <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
     <MenuItem onClick={handleMenuClose}>My account</MenuItem>
   </Menu>
 );

 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 aria-label="show 4 new mails" color="inherit">
         <Badge badgeContent={4} color="secondary">
           <MailIcon />
         </Badge>
       </IconButton>
       <p>Messages</p>
     </MenuItem>
     <MenuItem>
       <IconButton aria-label="show 11 new notifications" color="inherit">
         <Badge badgeContent={11} color="secondary">
           <NotificationsIcon />
         </Badge>
       </IconButton>
       <p>Notifications</p>
     </MenuItem>
     <MenuItem onClick={handleProfileMenuOpen}>
       <IconButton
         aria-label="account of current user"
         aria-controls="primary-search-account-menu"
         aria-haspopup="true"
         color="inherit"
       >
         <AccountCircle />
       </IconButton>
       <p>Profile</p>
     </MenuItem>
   </Menu>
 );

 return (
   <div className={classes.grow}>
     <AppBar position="static">
       <Toolbar>
         <IconButton
           edge="start"
           className={classes.menuButton}
           color="inherit"
           aria-label="open drawer"
         >
           <MenuIcon />
         </IconButton>
         <Typography className={classes.title} variant="h6" noWrap>
           Material-UI
         </Typography>
         <div className={classes.search}>
           <div className={classes.searchIcon}>
             <SearchIcon />
           </div>
           <InputBase
             placeholder="Search…"
             classes={{
               root: classes.inputRoot,
               input: classes.inputInput,
             }}
             inputProps={{ 'aria-label': 'search' }}
           />
         </div>
         <div className={classes.grow} />
         <div className={classes.sectionDesktop}>
           <IconButton aria-label="show 4 new mails" color="inherit">
             <Badge badgeContent={4} color="secondary">
               <MailIcon />
             </Badge>
           </IconButton>
           <IconButton aria-label="show 17 new notifications" color="inherit">
             <Badge badgeContent={17} color="secondary">
               <NotificationsIcon />
             </Badge>
           </IconButton>
           <IconButton
             edge="end"
             aria-label="account of current user"
             aria-controls={menuId}
             aria-haspopup="true"
             onClick={handleProfileMenuOpen}
             color="inherit"
           >
             <AccountCircle />
           </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>
     {renderMobileMenu}
     {renderMenu}
   </div>
 );
}

我的app.js文件：

import logo from './logo.svg';
import './App.css';
// import Sign from './pages/Sign'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import SignIn from './pages/SignIn';
import MaterialUiForm from './pages/MaterialUiForm';
import React from "react";
import { Grid } from "@material-ui/core";
import AppBar from './components/AppBar';
import PrimarySearchAppBar from './components/AppBar';


const App = () => (
  <div>
    {/* <PrimarySearchAppBar/> */}
    <AppBar/>


  </div>

);

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
//从“./pages/Sign”导入符号
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./pages/SignIn”导入登录；
从“./pages/MaterialForm”导入MaterialForm；
从“React”导入React；
从“@material ui/core”导入{Grid}”；
从“./components/AppBar”导入AppBar；
从“./components/AppBar”导入PrimarySearchAppBar；
常量应用=（）=>(
{/*  */}
);
导出默认应用程序；

---

我尝试使用appBar和PrimarySearchAppBar，但它们都不起作用

解决方案是卸载并重新安装库

package.json中的

React

版本是什么？如何导入此PrimarySearchAppBar组件？请显示导入行从“./components/AppBar”导入AppBar；从“./components/AppBar”导入PrimarySearchAppBar；我的react版本是17.0。2@Noname，请将您的

package.json

文件添加到问题中。我还想了解如何在父级中使用

PrimarySearchAppBar

组件。

import logo from './logo.svg';
import './App.css';
// import Sign from './pages/Sign'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import SignIn from './pages/SignIn';
import MaterialUiForm from './pages/MaterialUiForm';
import React from "react";
import { Grid } from "@material-ui/core";
import AppBar from './components/AppBar';
import PrimarySearchAppBar from './components/AppBar';


const App = () => (
  <div>
    {/* <PrimarySearchAppBar/> */}
    <AppBar/>


  </div>

);

export default App;