React-window: Autosizer funktioniert nicht mit Reaktionsfenstern

Die Auto-Sizer-Komponente funktioniert definitiv mit dieser Bibliothek. Lesen Sie die FAQs:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Es tut uns leid, dass Sie von Stack Overflow nicht viel Antwort erhalten haben, aber ich denke, dass dies immer noch der richtige Ort für diese Art von Frage ist (vorausgesetzt, Sie haben zuerst die FAQs gelesen: zwinker :)

Wie Sie sagten, dass es definitiv funktioniert, können Sie mich bitte anleiten, warum es bei mir nicht funktioniert?

Ich habe die FAQs bereits gelesen, aber das Problem ist, dass Höhe und Breite Null sind, weshalb auf der Seite kein Bild angezeigt wird, es sei denn, ich verwende window.innerHeigth / Width. Ich habe meinen Code auf SO eingefügt und weiß nicht, was daran falsch ist, da Dokumente nicht viel helfen.
Ich hoffe du hast meine Frage gut verstanden. Bitte lassen Sie mich zur weiteren Klärung wissen.

Läuft hier in der gleichen Ausgabe. Ich bekomme es absolut nicht zum Laufen. Ändern des Codes zum Debuggen:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

Wenn ich AutoSizer aus dem dedizierten Paket ( import AutoSizer from "react-virtualized-auto-sizer"; ) verwende, erhalte ich keine Ausgabe.

Wenn ich es von react-virtualized ({AutoSizer} aus 'React-Virtualized' importieren), erhalte ich die Ausgaben: 0 0 und 0 1806

Ich bin total begeistert, warum es nicht funktioniert (das

Läuft hier in der gleichen Ausgabe. Ich bekomme es absolut nicht zum Laufen. Ändern des Codes zum Debuggen:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

Wenn ich AutoSizer aus dem dedizierten Paket ( import AutoSizer from "react-virtualized-auto-sizer"; ) verwende, erhalte ich keine Ausgabe.

Wenn ich es von react-virtualized ({AutoSizer} aus 'React-Virtualized' importieren), erhalte ich die Ausgaben: 0 0 und 0 1806

Ich bin total begeistert, warum es nicht funktioniert (das

das gleiche Problem! Hast du eine Lösung gefunden?

Auch genau das gleiche Problem bekommen. Das Wechseln zu der in React-Virtualized enthaltenen Version behebt das Problem, aber ich würde es auch vorziehen, sie eigenständig mit React-Window zu verwenden.

Ich habe hier das gleiche Problem.

Ich konnte <AutoSizer /> aus dem dedizierten Paket erhalten, das mit react-window bis ich versuchte, ref für <List /> . Der Ref wurde nicht richtig eingestellt, daher musste ich von react-virtualized wieder auf die Verwendung des AutoSizers umsteigen.

Im Quellcode sieht es also so aus, als ob das Element keine berechnete Breite hat und die untergeordneten Elemente einfach nicht gerendert werden. Ich muss immer noch mit der eigentlichen Implementierung spielen, aber es scheint, als würde mein Container die Ausgabe rendern, solange er eine Größe hat (ob fest oder mit Flex oder so)

hoffe das hilft anderen

Ich habe das gleiche Problem mit TypeScript.

export 'AutoSizer' was not found in 'react-virtualized-auto-sizer'

EDIT: Fix gefunden.

Das @types/react-virtualized-auto-sizer -Paket definiert eine AutoSizer -Komponente nicht explizit.

Stattdessen wird Folgendes als Standardklasse exportiert:
export default class extends React.Component<AutoSizerProps> {}

Sie können dies wie folgt als AutoSizer importieren:
import AutoSizer from 'react-virtualized-auto-sizer';

Ich hatte das gleiche Problem mit der Höhe 0, und es stellte sich heraus, dass die Eltern eine feste Größe haben müssen, damit es funktioniert.
IMO diese 'Funktion' macht AutoSizer komplett überflüssig, da ich es genauso gut einfach nicht verwenden und dem Kind eine feste Größe geben kann, der Effekt ist der gleiche.

Aus den Dokumenten
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

Es wäre großartig, wenn wir eine Requisite übergeben könnten, um dieses Verhalten zu überschreiben, und wenn der AutoSizer das übergeordnete Element auf seine Größe strecken könnte.

Das gleiche Problem auch haben.

Ich konnte <AutoSizer /> aus dem dedizierten Paket erhalten, das mit react-window bis ich versuchte, ref für <List /> . Der Ref wurde nicht richtig eingestellt, daher musste ich von react-virtualized wieder auf die Verwendung des AutoSizers umsteigen.

Ich habe das gleiche Problem, wie können Sie es beheben?

Ich habe das gleiche Problem, wie können Sie es beheben?

Ich verwende wieder den Standard <AutoSizer />

import { AutoSizer } from 'react-virtualized'

Gleiches Problem für mich. AutoSizer setzt die Höhe bei Verwendung mit dem Reaktionsfenster auf 0. Ich benutze auch AutoSizer von React virtualisiert mit React-Window.

Originaldokumente

Kann ich AutoSizer in einem Flex-Container verwenden?

Wenn Sie einen AutoSizer als direktes untergeordnetes Element einer Flexbox verwenden, ist es normalerweise am besten, ihn mit einem div zu versehen, wie folgt:

<div style={{ display: 'flex' }}>
  <!-- Other children... -->
  <div style={{ flex: '1 1 auto' }}>
    <AutoSizer>
      {({ height, width }) => (
        <Component
          width={width}
          height={height}
          {...props}
        />
      )}
    </AutoSizer>
  </div>
</div>

Ich hatte mit den gleichen Fehlern zu kämpfen wie ihr und nach einer Weile habe ich es geschafft, dass es funktioniert.
Es kommt vor, dass Sie die Höhe und Breite des Außencontainers einstellen müssen. Andernfalls werden keine Kinder gerendert.
Überprüfen Sie dieses Beispiel https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312