React-Virtualized Autosizer berechnet Höhe als 0 für VirtualScroll

Question

Wo AutoSizer-Breite mir einen geeigneten Wert gibt, bekomme ich durchgängig eine Autosizer-Höhe von 0, was dazu führt, dass die VirtualScroll-Komponente nicht angezeigt wird. Wenn ich jedoch die Property disableHeight verwende und VirtualScroll einen festen Wert für die Höhe (z. B. 200px) zur Verfügung stelle, zeigt VirtualScroll Zeilen wie erwartet an. Kann jemand sehen, was falsch ist?

Schließlich soll der Autosizer in einer Material-ui-Dialog-Komponente leben, aber ich habe auch versucht, den Autosizer einfach in ein div zu rendern. Gleicher Fehler.

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

Dies bedeutet normalerweise, dass Sie die Stile der Eltern nicht korrekt festgelegt haben.

In dem Snippet, das Sie gepostet haben, ist das übergeordnete Element ein <div>, das standardmäßig ein "Block" -Element ist, was bedeutet, dass es die volle Breite automatisch ausfüllt. Allerdings haben Blockelemente keine native/Standardhöhe so berichtet AutoSizer eine Höhe von 0.

Um dies zu beheben, setzen Sie einfach einen Stil auf der <div> entweder height: 100% oder flex: 1 usw. Die <div> sollte dann wachsen und AutoSizer wird eine Höhe berichten > 0

Kasse auch die Dokumentation ähnliche gotchas zu vermeiden: * https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md#examples * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md