React-window: L'Autosizer ne fonctionne pas avec react-window

Le composant de dimensionnement automatique _definiment_ fonctionne avec cette bibliothèque. Consultez les FAQ:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Désolé, vous n'avez pas reçu beaucoup de réponse de Stack Overflow, mais je pense que c'est toujours le bon endroit pour répondre à ce type de question (en supposant que vous ayez lu la FAQ en premier: wink :)

Comme vous l'avez dit, cela fonctionne vraiment, pouvez-vous me dire pourquoi cela ne fonctionne pas pour moi?

J'ai déjà lu la FAQ, mais le problème est que la hauteur et la largeur sont nulles car aucune image n'est affichée sur la page à moins que j'utilise window.innerHeigth / Width. J'ai collé mon code sur SO et je ne sais pas ce qui ne va pas parce que les documents n'aident pas beaucoup.
J'espère que vous avez bien compris ma question. Veuillez me le faire savoir pour plus de précisions.

Courir dans le même problème ici. Je ne le fais absolument pas fonctionner. Modification du code pour le débogage:

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

lorsque j'utilise AutoSizer à partir du package dédié ( import AutoSizer from "react-virtualized-auto-sizer"; ), je n'obtiens aucune sortie.

Quand je l'utilise depuis react-virtualized (import {AutoSizer} depuis 'react-virtualized') j'obtiens les sorties: 0 0 et 0 1806

Je me demande complètement pourquoi cela ne fonctionne pas (l' exemple de codesandbox fonctionne sur le même navigateur)

Courir dans le même problème ici. Je ne le fais absolument pas fonctionner. Modification du code pour le débogage:

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

lorsque j'utilise AutoSizer à partir du package dédié ( import AutoSizer from "react-virtualized-auto-sizer"; ), je n'obtiens aucune sortie.

Quand je l'utilise depuis react-virtualized (import {AutoSizer} depuis 'react-virtualized') j'obtiens les sorties: 0 0 et 0 1806

Je me demande complètement pourquoi cela ne fonctionne pas (l' exemple de codesandbox fonctionne sur le même navigateur)

le même problème! avez-vous trouvé une solution?

Obtient également exactement le même problème. Le passage à la version incluse dans react-virtualized résout le problème, mais je préférerais également l'utiliser de manière autonome avec react-window.

J'ai le même problème ici.

J'ai pu obtenir <AutoSizer /> du package dédié fonctionnant avec react-window jusqu'à ce que j'essaye d'utiliser le ref sur <List /> . Cela ne définirait pas correctement la référence, j'ai donc dû revenir à l'utilisation de l'AutoSizer à partir de react-virtualized .

donc dans le code source, il semble que s'il n'y a pas de largeur calculée sur l'élément, cela ne rend tout simplement pas les enfants. Je dois encore jouer avec l'implémentation réelle, mais il semble que tant que mon conteneur a une taille (qu'elle soit fixe ou en utilisant flex ou quelque chose), il rendra la sortie

espère qui aide les autres

J'ai le même problème avec TypeScript.

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

EDIT: trouvé un correctif.

Le package @types/react-virtualized-auto-sizer ne définit pas explicitement un composant AutoSizer .

Au lieu de cela, il exporte les éléments suivants en tant que classe par défaut:
export default class extends React.Component<AutoSizerProps> {}

Vous pouvez importer ceci en tant que AutoSizer comme ceci:
import AutoSizer from 'react-virtualized-auto-sizer';

J'ai eu le même problème avec la hauteur de 0, et il s'est avéré que ses parents doivent avoir une taille fixe pour que cela fonctionne.
IMO, cette `` fonctionnalité '' supprime complètement le besoin d'AutoSizer, car je peux aussi bien ne pas l'utiliser et donner à l'enfant une taille fixe, l'effet est le même.

À partir des documents
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.)

Ce serait formidable si nous pouvions passer un accessoire pour remplacer ce comportement et demander à l'AutoSizer d'étirer le parent à sa taille.

Avoir le même problème aussi.

J'ai pu obtenir <AutoSizer /> du package dédié fonctionnant avec react-window jusqu'à ce que j'essaye d'utiliser le ref sur <List /> . Cela ne définirait pas correctement la référence, j'ai donc dû revenir à l'utilisation de l'AutoSizer à partir de react-virtualized .

J'ai le même problème, comment le résoudre?

J'ai le même problème, comment le résoudre?

J'utilise à nouveau la norme <AutoSizer />

import { AutoSizer } from 'react-virtualized'

Même problème pour moi. AutoSizer définit la hauteur sur 0 lors de l'utilisation avec la fenêtre de réaction. J'utilise également AutoSizer de react virtualized avec react-window.

documents originaux

Puis-je utiliser AutoSizer dans un conteneur flexible?

Lorsque vous utilisez un AutoSizer en tant qu'enfant direct d'une boîte flexible, il est généralement préférable de l'envelopper avec un div, comme ceci:

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

J'ai lutté avec les mêmes erreurs que vous les gars, et après un certain temps, j'ai réussi à le faire fonctionner.
Il arrive que vous deviez définir la hauteur et la largeur du conteneur extérieur. Sinon, il ne rendra pas les enfants.
Vérifiez cet exemple https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312