問題是您沒有存儲當前展開的面板名稱（或 ID）
import { useState } from "react";
const ExpandableItem = props => {
const [itemState, setItemState] = useState({open: false, menuItemName: ""});
console.log(props.menuItemName);
return props.render({ itemState, setItemState });
};
export default ExpandableItem;
我已將變量 [open, setOpen] 重命名為 [itemState, setItemState]，因此需要在其使用的任何地方進行更改，（或者您可以添加單獨的變量來設置當前選定的 menuName）
在您的 ExpandableItemContainer 中，在 onClick 處理程序中傳遞適當的值 xprops.setItemState({open:!xprops.itemState.open, menuItemName}})
同樣在 Collapse 組件中將 in Prop 更改為
in={xprops.itemState.open && menuItemName === xprops.itemState.menuItemName}
const ExpandableItemContainer = ({
icon,
menuItemName,
firstItemName,
firstItemLink,
secondItemName,
secondItemLink,
}) => (
<ExpandableItem
render={(xprops) => (
<>
<ListItem button
onClick={
(menuItemName) => xprops.setItemState({open:!xprops.itemState.open, menuItemName}})
}
>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={menuItemName} />
{xprops.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={xprops.itemState.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem
button
className={classes.nested}
component={Link}
to={firstItemLink}
>
<ListItemIcon>
<VisibilityIcon />
</ListItemIcon>
<ListItemText primary={firstItemName} />
</ListItem>
<ListItem
button
className={classes.nested}
component={Link}
to={secondItemLink}
>
<ListItemIcon>
<AddIcon />
</ListItemIcon>
<ListItemText primary={secondItemName} />
</ListItem>
</List>
</Collapse>
</>
)}
/>
);
如果您想切換選擇，您需要將狀態保持在頂層（列表而不是 listItem 級別，如下所示
export default function SideBar() {
const classes = useStyles();
const gymId = 1;
const [itemState, setItemState] = React.useState({
open: false,
menuItemName: ""
});
const NonExpandableItemContainer = ({ icon, menuItemName, menuItemLink }) => (
<ListItem button component={Link} to={menuItemLink}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={menuItemName} />
</ListItem>
);
const ExpandableItemContainer = ({
icon,
menuItemName,
firstItemName,
firstItemLink,
secondItemName,
secondItemLink
}) => (
<ExpandableItem
render={xprops => (
<>
<ListItem
button
onClick={() =>
setItemState({
open:
menuItemName === itemState.menuItemName
? !itemState.open
: true,
menuItemName
})
}
>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={menuItemName} />
{itemState.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse
in={itemState.open && menuItemName === itemState.menuItemName}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
<ListItem
button
className={classes.nested}
component={Link}
to={firstItemLink}
>
<ListItemIcon>
<VisibilityIcon />
</ListItemIcon>
<ListItemText primary={firstItemName} />
</ListItem>
<ListItem
button
className={classes.nested}
component={Link}
to={secondItemLink}
>
<ListItemIcon>
<AddIcon />
</ListItemIcon>
<ListItemText primary={secondItemName} />
</ListItem>
</List>
</Collapse>
</>
)}
/>
);
return (
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.root}
>
<NonExpandableItemContainer
icon={<HomeIcon />}
menuItemName="Home"
menuItemLink={"/gym/" + gymId + "/home"}
/>
<ExpandableItemContainer
icon={<SupervisorAccountIcon />}
menuItemName="Administrators"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewAccount"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addAccount"}
/>
<ExpandableItemContainer
icon={<AccessibilityNewIcon />}
menuItemName="Trainers"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewAccount"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addAccount"}
/>
<ExpandableItemContainer
icon={<FaceIcon />}
menuItemName="Members"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewAccount"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addAccount"}
/>
<ExpandableItemContainer
icon={<FitnessCenterIcon />}
menuItemName="Trainings"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewTrainings"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addTraining"}
/>
<NonExpandableItemContainer
icon={<EventIcon />}
menuItemName="Training schedules"
menuItemLink={"/gym/" + gymId + "/viewTrainingSchedules"}
/>
<ExpandableItemContainer
icon={<PanoramaWideAngleIcon />}
menuItemName="Halls"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewHalls"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addHall"}
/>
<ExpandableItemContainer
icon={<ReceiptIcon />}
menuItemName="Pricelist"
firstItemName="View"
firstItemLink={"/gym/" + gymId + "/viewPricelist"}
secondItemName="Add"
secondItemLink={"/gym/" + gymId + "/addPricelistItem"}
/>
<NonExpandableItemContainer
icon={<PhoneIcon />}
menuItemName="Contact"
menuItemLink={"/gym/" + gymId + "/contact"}
/>
<NonExpandableItemContainer
icon={<SettingsIcon />}
menuItemName="Settings"
menuItemLink={"/gym/" + gymId + "/settings"}
/>
</List>
</div>
</Drawer>
);
}
codesandbox鏈接：https ://otzsl.csb.app/
