【发布时间】：2020-11-02 08:52:25
【问题描述】：
我的 VS 代码认为我在这个组件上缺少 7 个结束标记。他们都在那里。
VS Code 不喜欢的行标有 ** - 错误消息在相关结束标记下方以斜体注释。
我正在寻找有关如何找到错误来源的提示？
Dashboard2.jsx
import React, { useState, useEffect } from 'react';
import { Switch, Route, Link, BrowserRouter } from "react-router-dom";
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Container from '@material-ui/core/Container'
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import AccountCircle from '@material-ui/icons/AccountCircle';
import PaletteIcon from '@material-ui/icons/Palette';
import CenterFocusWeakIcon from '@material-ui/icons/CenterFocusWeak';
import RoomServiceIcon from '@material-ui/icons/RoomService';
import StorefrontIcon from '@material-ui/icons/Storefront';
import AssignmentIcon from '@material-ui/icons/Assignment';
import NotificationsIcon from '@material-ui/icons/Notifications';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import BookIcon from '@material-ui/icons/Book';
import TuneIcon from '@material-ui/icons/Tune';
import SettingsIcon from '@material-ui/icons/Settings';
import CloseIcon from '@material-ui/icons/Close';
import DashboardFooter from "./DashboardFooter";
import Dsm from "./Dsm/Menu";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
},
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
// autoWidth: false
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
}));
export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
// const { performingAction, user, userData, roles } = this.props;
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
**<AppBar**
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
// 'JSX 元素'div' 没有对应的结束标签。'
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap style={{ letterSpacing: '.5rem'}}>
{process.env.REACT_APP_TITLE}
</Typography>
<IconButton color="inherit"><CloseIcon /></IconButton>
</Toolbar>
</AppBar>
<BrowserRouter>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<List>
<ListItem button key="1" component={Link} to={"/Dsm" }>
<ListItemIcon><PaletteIcon /></ListItemIcon>
<ListItemText primary="DSM"></ListItemText>
</ListItem>
<ListItem button key="2" component={Link} to={"/MMM" }>
<ListItemIcon><CenterFocusWeakIcon /></ListItemIcon>
<ListItemText>MM</ListItemText>
</ListItem>
<ListItem button key="3" component={Link} to={"/CentreMenu" }>
<ListItemIcon><StorefrontIcon /></ListItemIcon>
<ListItemText>Centre</ListItemText>
</ListItem>
<ListItem button key="4" component={Link} to={"/ToolsMenu" }>
<ListItemIcon><AssignmentIcon /></ListItemIcon>
<ListItemText>Tools</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="5" component={Link} to={"/Profile" }>
<ListItemIcon> <AccountBoxIcon /></ListItemIcon>
<ListItemText>Profile</ListItemText>
</ListItem>
<ListItem button key="6" component={Link} to={"/Account" }>
<ListItemIcon> <SettingsIcon /></ListItemIcon>
<ListItemText>Account</ListItemText>
</ListItem>
<ListItem button key="7" component={Link} to={"/Mail" }>
<ListItemIcon> <MailIcon /></ListItemIcon>
<ListItemText>Mail</ListItemText>
</ListItem>
<ListItem button key="8" component={Link} to={"/Notifications" }>
<ListItemIcon> <NotificationsIcon /></ListItemIcon>
<ListItemText>Notifications</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="9" component={Link} to={"/KCentreMenu" }>
<ListItemIcon> <BookIcon /></ListItemIcon>
<ListItemText>KCentre</ListItemText>
</ListItem>
<ListItem button key="10" component={Link} to={"/DeskMenu" }>
<ListItemIcon><RoomServiceIcon /></ListItemIcon>
<ListItemText>Desk</ListItemText>
</ListItem>
<ListItem button key="11" component={Link} to={"/Support" }>
<ListItemIcon> <ContactSupportIcon /></ListItemIcon>
<ListItemText>Help and Support</ListItemText>
</ListItem>
</List>
</Drawer>
**<main className={classes.content}>**
**<div className={classes.toolbar} />**
**<Switch>**
**<Route path="/Dsm" component={Dsm} />**
//'需要标识符。'
<Route path="/MM" component={Dsm} />
</Switch>
//'未终止的字符串文字。'
''p' 的预期对应 JSX 结束标记。' - 我认为这是指带有工具栏类的自关闭 div - 该组件中没有 p 标签
</main>
// 'JSX 元素'main' 没有对应的结束标签。'
</BrowserRouter>
**</div>**
*//''</' expected.' - note this error message, pointing at this div, is reported twice*
);
}
【问题讨论】：
标签： reactjs material-ui jsx