react-virtualizationized中的表不会呈现任何行

时间:2017-09-09 17:18:07

标签: reactjs react-virtualized

我在使用自定义行渲染器的react-virtualized Table(在AutoSizer内部的InfiniteLoader内)遇到问题。呈现行标题行,但没有数据行。任何行都不会调用rowRendererrowGetter。我检查了数据(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>

1 个答案:

答案 0 :(得分:4)

我的猜测是容器div没有固定的高度,因为你使用的是Autosizer,你的表最终会得到身高= 0.在{的道具中尝试使用固定的height {1}}和容器div(可能基于当前行数*行高)。

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