15

AutoSizer 的宽度给了我一个合适的值，我一直得到一个 Autosizer 高度为 0，这导致 VirtualScroll 组件不显示。但是，如果我使用 disableHeight 属性并为 VirtualScroll 提供一个固定的高度值（即 200 像素），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>
)}
4

2 回答 2

22

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

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

于 2016-07-13T01:41:18.380 回答
1

希望这对未来的人有所帮助。我在 AutoSizer 周围有一个毫无意义的父 div

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

Chrome 和 firefox 都很好，但 safari 没有渲染任何东西。删除它似乎已经解决了这一切。

于 2019-11-12T11:05:50.577 回答