为什么我的反应虚拟列表不显示滚动条，除非我确保高度低于 rowCount*rowHeight？

Question

我正在使用

"react-virtualized": "9.22.5"

，并且我正在尝试渲染一个列表。

当我经过时

<List
  height={myList.length * 30}
  rowHeight={30}
  rowCount={myList.length}
  width={240}
  style={{maxHeight: 657}}
  rowRenderer={({ index, key, style }) => {...}
/>

我只得到前 21 项，即使

myList

更长。这意味着我没有滚动条，并且其余项目不可见。如果我使用

rowCount={myList.length + 1}

，它会神奇地正确计算行数，并且我会得到滚动条。或者，设置

height={myList.length*30 - 0.001}

也可以。

console.log(myList.length)

显示正确的长度。

发生什么事了？

Answer 1

事实证明，

List

不知道它的

maxHeight

是什么——它“认为”它以全高显示。由于

height

与

rowCount

所需的一样大，因此不会显示滚动条。要显示滚动条，无论其他样式如何，

height

都必须小于

rowCount*rowHeight

。

我的解决方案是写

List

而不使用

maxHeight

，但否则我会使用

-0.001

hack。