材质ui折叠表未正确呈现

qltillow  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(269)

我正在尝试使用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> 

    )
}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题