React-Virtualized Autosizer 將 VirtualScroll 的高度計算為 0

Question

AutoSizer 的寬度給了我一個合適的值，我一直得到一個 Autosizer 高度為 0，這會導致 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> ，默認情況下它是一個“塊”元素 - 這意味着它會自動填充整個寬度。 但是塊元素沒有原生/默認高度，因此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 沒有渲染任何東西。 刪除它似乎已經解決了所有問題。