Javascript React虚拟化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>
)}

render（）{
返回(
{（{宽度，高度}）=>(
)}
)}

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

在您发布的代码段中，父元素是一个

，默认情况下是一个“block”元素，这意味着它会自动填充整个宽度。但是，块元素没有本机/默认高度，因此

AutoSizer

报告的高度为0

要解决此问题，只需在

上设置

高度：100%

或

flex:1

等的样式。然后

将增长，并且

AutoSizer

将报告高度>0

也签出文档以避免其他类似的问题： *

---

*希望这能帮助未来的人们。我在AutoSizer周围有一个毫无意义的家长div

Chrome和firefox都可以，但safari没有渲染任何内容。删除它似乎解决了所有问题。

继承了其父级的高度。