如何解决子菜单在react + Mi中无法正常工作
我需要在我的组件下创建一个子菜单,例如:用户:添加用户-编辑用户。文件:更新文件,下载文件。如果使用“用户”子菜单,则当我将其同时打开时,可以说“打开”状态对两者均有效,但是我想使它们独立,例如:打开“用户”菜单,然后按:添加用户-编辑用户。还有包含子菜单的文件,它们保持关闭状态,只有在单击时才打开。 我正在使用React.js,material-ui请帮助我!
const useStyles = makeStyles ((theme: Theme) =>
createStyles ({
root: {
width: '100%',maxWidth: 360,backgroundColor: theme.palette.background.paper,},nested: {
paddingLeft: theme.spacing (4),}),);
export default function ListMenuUp () {
const classes = useStyles ({settings: [{id: "1",open: false},{id: "2",open: false}]});
const [open,setOpen] = React.useState (true);
const handleClick = () => {
setOpen (! open);
};
return (
<List
component = "nav"
aria-labeledby = "nested-list-subheader"
subheader = {
<ListSubheader component = "div" id = "nested-list-subheader">
Control panel
</ListSubheader>
}
className = {classes.root}
>
{/ * DashBoard starts here * /}
<ListItem button component = "a" href = "/ admin">
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary = "DashBoard" />
</ListItem>
{/ * Here begins the Archives * /}
<ListItem button onClick = {handleClick}>
<ListItemIcon>
<SupervisedUserCircleIcon />
</ListItemIcon>
<ListItemText primary = "Users" />
{open? <ExpandLess />: <ExpandMore />}
</ListItem>
<Collapse in = {open} timeout = "auto" unmountOnExit>
<List component = "div" disablePadding>
<ListItem button component = "a" href = "/ admin / users / register" className = {classes.nested}>
<ListItemIcon>
<AddIcon />
</ListItemIcon>
<ListItemText primary = "Register" />
</ListItem>
</List>
{/ * Here begins another User from the same list * /}
<List component = "div" disablePadding>
<ListItem button component = "a" href = "/ admin / users" className = {classes.nested}>
<ListItemIcon>
<EditIcon />
</ListItemIcon>
<ListItemText primary = "Edit" />
</ListItem>
</List>
</Collapse>
{/ * Here begins the Archives * /}
<ListItem button>
<ListItemIcon>
<CloudUploadIcon />
</ListItemIcon>
<ListItemText primary = "Files" />
</ListItem>
{/* Others*/}
{/ * Here begins the New * /}
<ListItem button onClick = {handleClick}>
<ListItemIcon>
<SupervisedUserCircleIcon />
</ListItemIcon>
<ListItemText primary = "New" />
{open? <ExpandLess />: <ExpandMore />}
</ListItem>
<Collapse in = {open} timeout = "auto" unmountOnExit>
<List component = "div" disablePadding>
<ListItem button component = "a" href = "/ admin / users / register" className = {classes.nested}>
<ListItemIcon>
<AddIcon />
</ListItemIcon>
<ListItemText primary = "NewOne" />
</ListItem>
</List>
{/ * Here begins another User from the same list * /}
<List component = "div" disablePadding>
<ListItem button component = "a" href = "/ admin / users" className = {classes.nested}>
<ListItemIcon>
<EditIcon />
</ListItemIcon>
<ListItemText primary = "NewTwo" />
</ListItem>
</List>
</Collapse>
</List>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。