如何在反应虚拟化中禁用表的高度属性？答案

【问题标题】：How to disable height property for table in react virtualised?如何在反应虚拟化中禁用表的高度属性？
【发布时间】：2021-03-12 14:14:45
【问题描述】：

我正在使用 react-virtualised 在我的 react 应用程序中呈现一个 html 表格。元素的 height 属性默认设置为需要。现在我不想为桌子设置高度，但我想为它设置最大高度。原因是通过设置一个固定的高度，一次可以显示 20 条记录，如果 api 只返回 3 条记录，则下面有一个巨大的空白，边框左下方。我浏览了文档，但找不到任何解决方法。

          <Table
            rowClassName={({ index }) => rowClassName({ index })}
            headerHeight={50}
            height={700}  
            width={1200}
            rowHeight={40}
            rowCount={props.exceldata.length}
            rowGetter={({ index }) => props.exceldata[index]}
          >
            <Column label="email" dataKey="email" width={450} />
            <Column label="JoinDate" dataKey="JoinDate" width={200} />
            <Column label="isVip" dataKey="isVip" width={120} />
            <Column label="onBoarding" dataKey="onBoarding" width={150} />
          </Table>

我尝试在表格中添加“autoHeight”属性，但我只能在一小行中看到表格的标题和整个主体。此外，我遵循节点模块中某些文件的 height 属性，在 height 属性旁边添加了一个问号以使其可选，但根本没有呈现表格。

此外，如果我在 height 属性上添加 max-height ，它将不起作用。如果有人能帮我找到一个 React 虚拟化的解决方案，甚至 CSS 修复也可以，我会很高兴。不知何故，我可以覆盖 height 属性并使表格只看到 max-height 属性。

【问题讨论】：

标签： html css reactjs node-modules react-virtualized

【解决方案1】：

所以我只是想出了一个 javascript 方法来做到这一点。我将一个表达式传递给 height 属性，以设置 20 行的最小高度或行数的高度（如果小于 20）。

height={Math.min(700, props.exceldata.length * 40 + 50)}

'props.exceldata' 是包含 json 对象/表格行的数组。 700(px) 是显示的最小高度，一次可以显示 20 条记录。或者如果数组中的行数小于 20，我将通过乘以 no 来计算这些行的高度。每行高度（40px）的行数。而'50'是表格的标题高度。

【讨论】：