反應虛擬化動態表高度

Question

我正在使用反應虛擬化。

我想要實現的目標：我希望表格自身的高度是動態的，這樣當我的表格中添加更多行時表格的高度就會增加。

我在行上使用了 CellMeasurer 來計算每行的高度。 似乎來自 react-table 的 List 需要一個高度來知道它應該渲染多少，那么計算新表格高度的正確方法是什么？

Answer 1

您可以按照docs所述簡單地指定autoHeight prop。

Answer 2

您可以使用react-virtualized提供的WindowScroller組件的height

例子：

<WindowScroller>
           {({ height, scrollTop}) => (
             <AutoSizer disableHeight>
                {({ width }) => (
                  <Table                   
                    autoHeight
                    height={height}
                    scrollTop={scrollTop}                    
                    width={width}
                    {...otherRequiredProps}
                  >           
                    {/* Columns here*/}
                  </Table>
                )}
              </AutoSizer>
           )}
</WindowScroller>

在上面的代碼中，我還使用了AutoSizer組件來獲取容器寬度。