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

在AutoSizer的宽度为我提供适当值的地方，我始终将Autosizer高度设置为0，这导致VirtualScroll组件无法显示。但是，如果我使用disableHeight属性并为VirtualScroll提供一个固定的高度值(即200px)，则VirtualScroll将按预期显示行。谁能看到什么错？

最终，Autosizer应该位于Material-ui对话框组件中，但我也尝试过将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>
)}

最佳答案

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

在您发布的代码段中，父级是<div>，默认情况下是AutoSizer，是“块”元素-表示它会自动填充整个宽度。但是，块元素没有原始/默认高度，因此<div>报告高度为0。

要解决此问题，只需在height: 100%上设置flex: 1或<div>等的样式。然后AutoSizer应增长，并且ojit_code将报告高度> 0。

还要 checkout 文档以避免其他类似的陷阱:
* https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md#examples
* https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md