fix: 后台侧边栏单成员组渲染崩溃(React #31——对象数组直接当子元素,改为统一 map 渲染并保留多组折叠)
This commit is contained in:
@@ -121,23 +121,26 @@ export default function AdminLayout() {
|
||||
const renderGroup = (g) => {
|
||||
const single = g.items.length === 1;
|
||||
const open = openGroups.has(g.id);
|
||||
const items = (single ? g.items : (
|
||||
const itemList = (
|
||||
<List component="div" disablePadding>
|
||||
{g.items.map((item) => (
|
||||
<ListItemButton
|
||||
key={item.path}
|
||||
selected={location.pathname.startsWith(item.path)}
|
||||
onClick={() => { goMenu(item.path); }}
|
||||
sx={{ pl: single ? 2 : 4 }}
|
||||
>
|
||||
<ListItemIcon>{item.icon ? <item.icon fontSize="small" /> : null}</ListItemIcon>
|
||||
<ListItemText primary={item.label} primaryTypographyProps={{ fontSize: 14 }} />
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
);
|
||||
const items = single ? itemList : (
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
{g.items.map((item) => (
|
||||
<ListItemButton
|
||||
key={item.path}
|
||||
selected={location.pathname.startsWith(item.path)}
|
||||
onClick={() => { goMenu(item.path); }}
|
||||
sx={{ pl: 4 }}
|
||||
>
|
||||
<ListItemIcon>{item.icon ? <item.icon fontSize="small" /> : null}</ListItemIcon>
|
||||
<ListItemText primary={item.label} primaryTypographyProps={{ fontSize: 14 }} />
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
{itemList}
|
||||
</Collapse>
|
||||
));
|
||||
);
|
||||
|
||||
return (
|
||||
<Box key={g.id}>
|
||||
|
||||
Reference in New Issue
Block a user