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

【问题标题】：React-Virtualized Autosizer calculates height as 0 for VirtualScrollReact-Virtualized Autosizer 为 VirtualScroll 计算高度为 0
【发布时间】：2016-11-15 08:31:23
【问题描述】：

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>
)}

【问题讨论】：

标签： javascript material-ui react-virtualized

【解决方案1】：

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

在您发布的 sn-p 中，父级是 <div>，默认情况下是“块”元素 - 意味着它会自动填充整个宽度。但是块元素没有原生/默认高度，所以AutoSizer 报告高度为 0。

要解决这个问题，只需在 height: 100% 或 flex: 1 等的 <div> 上设置一个样式。<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

【讨论】：

<AutoSizer /> 继承其父级的高度。

【解决方案2】：

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

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

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

【讨论】：