react-virtualized 中的表不呈现任何行答案

【问题标题】：Table in react-virtualized does not render any rowsreact-virtualized 中的表不呈现任何行
【发布时间】：2017-09-09 17:18:06
【问题描述】：

我在使用自定义行渲染器的反应虚拟化表（在 AutoSizer 内的 InfiniteLoader 内）时遇到问题。呈现标题行，但没有数据行。 rowRenderer 或 rowGetter 都不会被调用任何行。我检查了那里的数据（this.props.requests）。

我缺少什么，或者，我该如何进行调试？

<AutoSizer>
  {({ height, width }) => (
    <InfiniteLoader
      isRowLoaded={this.isRowLoaded}
      loadMoreRows={this.props.loadMoreEntries}
      rowCount={(this.props.requests || []).length}
    >
      {({ onRowsRendered, registerChild }) => (
        <Table
          deferredMeasurementCache={this._cache}
          onRowsRendered={onRowsRendered}
          overscanRowCount={2}
          ref={registerChild}
          height={height}
          headerHeight={50}
          rowCount={(this.props.requests || []).length}
          rowHeight={this._cache.rowHeight}
          rowRenderer={this._rowRenderer}
          rowGetter={this._rowGetter}
          onRowClick={this.rowClicked}
          width={width}
        >
          <Column
            dataKey="requestType"
            label="RqType"
            width={100}
            cellRenderer={this._renderRequestType}
          />
          ...
        </Table>
      )}
    </InfiniteLoader>
  )}
</AutoSizer>

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

我的猜测是容器 div 没有固定高度，并且由于您使用的是 Autosizer，因此您的表格最终高度 = 0。尝试在 Table 的道具中使用固定的 height 和容器 div（可能基于当前行数 * 行高）。

您还可以检查rowCount 是否为正，但据我所知应该没问题。

【讨论】：