React-Virtualized Autosizer为VirtualScroll计算高度为0

Question

AutoSizer的宽度给我一个合适的值,我一直得到Autosizer高度为0,这导致VirtualScroll组件不显示.但是,如果我使用disableHeight prop并为VirtualScroll提供固定的高度值(即200px),VirtualScroll会按预期显示行.谁能看到什么错了？

最终,Autosizer意味着生活在Material-ui Dialog组件中,但我也试过将autosizer简单地渲染成div.同样的问题.

render() {
return (
  <Dialog
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
    contentStyle={pageOptionsDialog.body}
  >
  <div>
    <AutoSizer>
      {({ width, height }) => (
        <VirtualScroll
          id="virtualScroll"
          onRowsRendered={this.props.loadNextPage}
          rowRenderer={this.rowRenderer}
          height={height}
          rowCount={this.props.rowCount}
          rowHeight={30}
          width={width}
        />
      )}
    </AutoSizer>
  </div>
</dialog>
)}

Answer 1

这通常意味着您没有正确设置父级样式.

在您发布的代码段中,父级是a <div>,默认情况下是"块"元素 - 这意味着它会自动填充整个宽度.但是块元素没有本机/默认高度,因此AutoSizer报告高度为0.

为了解决这个问题,只需设置一个风格上<div>的任一height: 100%或flex: 1等<div>则应该增长,AutoSizer将报告的高度> 0.

检查文档以避免其他类似的问题:*https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md#examples *https://github.com/bvaughn/react-virtualized /blob/master/docs/usingAutoSizer.md