react-virtualized List比预期的更长

Question

我正在使用以下公式计算List组件的高度： rowHeight * rowCount（事实上，如果可以从其他两个道具计算出来，我仍然不明白为什么需要height）。 但似乎渲染的列表比它应该更长。

下面是截图。你在这里看到最后一行下面有很多空的空间。

这是列表的代码：

       let height = rowHeight * this.state.leads.length
       items = (<div style={{minHeight: 100}}>
                    <List
                        ref={list => this.list=list}
                        height={height}
                        width={1600}
                        rowCount={this.state.leads.length}
                        rowHeight={rowHeight}
                        rowRenderer={(p) => this.rowRenderer(p, search_results)} />
                </div>)

Answer 1

我认为这个问题暗示了对反应虚拟化如何运作的根本误解。从this slide查看my presentation on windowing以获得高级概述。

简洁地说，height属性告诉反应虚拟化了显示整个数据的窗口切片所需的空间。如果您将height设置为等于rowHeight * rowCount，那么您不会向任何窗口显示任何内容 - 您正在显示所有内容。

反应虚拟化的文档非常不错（我认为）关于解释道具及其用途，并展示可以复制粘贴的示例。我建议您查看List docs和/或WindowScroller docs（如果您希望List填写整个浏览器页面。）

我希望这有助于澄清为什么height道具是必要约束的混淆。