1

我正在寻求帮助解决我最近在使用 React-Window 和 MUI Collapsible Table Rows 时遇到的问题。

一般来说，react-window 为数组中的每个项目渲染行，其中一些内容隐藏，直到我们按下箭头。按下时，我们的列下方会出现一个带有隐藏内容的新列。

 function Row({ index, style }) {
   const [showList, toggleShowList] = useState(false);   
   
   return (
    <Fragment>
      <TableRow sx={style}>
         <TableCell>Visable Row:{index}</TableCell>
         <TableCell>
            <IconButton
                  aria-label="expand row"
                  size="small"
                  onClick={() => toggleShowList(!showList)}
                >
                  {showList ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
         </TableCell>
       </TableRow>
       <TableRow sx={{ style, display: showList ? "table-row" : "none" }}>
          <TableCell>hidden row:{index}</TableCell>
       </TableRow>
     </Fragment>
    );
  }

以上示例基于MUI Table 组件页面。当我将它传递给 React-Window 时出现问题，因为它的显示隐藏内容不合适。

我尝试使用 useRef() 来计算行高，但它对隐藏元素没有影响。

我愿意接受建议和解决方案。我在代码沙盒上创建了一个示例，其中包括它的实际工作方式以及我希望它如何（应该）工作。

4

0 回答 0