我正在尝试使用MateAlUI制作一个可折叠的表格目前,我的幻灯片都有折叠,但它们链接到一个“打开”状态,因此如果我打开一张幻灯片,其他所有幻灯片都会打开。
道具阵列的对象需要一个可折叠的表,为每一张幻灯片,我有。
const props = [
{slide: "Protein", charts: ["Keto"]},
{slide: "Bars with benefits - beyond the nutritional profile", charts: ["Innovative approaches"]},
{slide: "Vegan", charts: []}
]
return (
<div>
{
props.map((blog) =>
<React.Fragment>
<TableRow key={props} >
<TableCell component="th" scope="row">
{blog.slide}
</TableCell>
<TableCell size="small">
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon/>}
</IconButton>
</TableCell>
</TableRow>
{
blogs.chart===[] ? <></>:
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
{
open && <Box margin={1}>
<Table size="small" aria-label="purchases">
<TableBody>
{blog.charts}
</TableBody>
</Table>
</Box>
}
</Collapse>
</TableCell>
</TableRow>
}
</React.Fragment>
)
}
</div>
)
}
暂无答案!
目前还没有任何答案,快来回答吧!