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

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

在您发布的代码段中，父级是<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

Answer 2

希望这对将来的人有帮助。我在AutoSizer上有一个毫无意义的父div

<div style={{ height: height || '100%', minWidth: "20vw" }}>

Chrome和Firefox很好用，但Safari没有呈现任何内容。删除它似乎已解决了所有问题。

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

2 个答案: