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

Question

在 AutoSizer 的宽度为我提供适当值的地方，我始终得到 0 的 Autosizer 高度，这导致 VirtualScroll 组件不显示。但是，如果我使用 disableHeight 属性并为 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

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

在您发布的片段中，父级是 <div> ，默认情况下是一个“ block ”元素——这意味着它会自动填充整个宽度。然而， block 元素没有原生/默认高度，所以 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