React-window: O Autosizer não funciona com a janela de reação

O componente dimensionador automático _definitivamente_ funciona com esta biblioteca. Confira as perguntas frequentes:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Desculpe, você não obteve muitas respostas do Stack Overflow, mas acho que ainda é o lugar certo para responder a esse tipo de pergunta (presumindo que você leu as Perguntas frequentes primeiro: wink :)

Como você disse que definitivamente funciona, por favor, você pode me orientar por que não está funcionando para mim?

Já li as perguntas frequentes, mas o problema é que a altura e a largura são zero, pois nenhuma imagem é exibida na página, a menos que eu use window.innerHeigth / Width. Eu colei meu código no SO e não sei o que há de errado com ele porque os documentos não estão ajudando muito.
Espero que você tenha entendido bem a minha pergunta. Por favor, deixe-me saber para mais esclarecimentos.

Correndo na mesma questão aqui. Eu absolutamente não consigo fazer funcionar. Alterando o código para depuração:

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

quando eu uso o AutoSizer do pacote dedicado ( import AutoSizer from "react-virtualized-auto-sizer"; ), não recebo nenhuma saída.

Quando eu o uso de react-virtualized (import {AutoSizer} de 'react-virtualized'), obtenho os resultados: 0 0 e 0 1806

Não consigo entender por que não funciona (o exemplo do

Correndo na mesma questão aqui. Eu absolutamente não consigo fazer funcionar. Alterando o código para depuração:

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

quando eu uso o AutoSizer do pacote dedicado ( import AutoSizer from "react-virtualized-auto-sizer"; ), não recebo nenhuma saída.

Quando eu o uso de react-virtualized (import {AutoSizer} de 'react-virtualized'), obtenho os resultados: 0 0 e 0 1806

Não consigo entender por que não funciona (o exemplo do

o mesmo problema! você encontrou solução?

Também tendo exatamente o mesmo problema. Mudar para a versão incluída no react-virtualized corrige o problema, mas eu também prefiro usá-lo autônomo com a janela react.

Estou tendo o mesmo problema aqui.

Consegui obter <AutoSizer /> do pacote dedicado trabalhando com react-window até tentar usar ref em <List /> . Não definiria o ref corretamente, então tive que voltar a usar o AutoSizer de react-virtualized .

portanto, no código-fonte, parece que, se não houver largura calculada no elemento, ele simplesmente não renderiza os filhos. eu ainda tenho que brincar com a implementação real, mas parece que enquanto meu contêiner tiver um tamanho (seja fixo ou usando flex ou algo assim), ele renderizará a saída

espero que ajude outros

Estou tendo o mesmo problema ao usar o TypeScript.

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

EDIT: Encontrou uma correção.

O pacote @types/react-virtualized-auto-sizer não define explicitamente um componente AutoSizer .

Em vez disso, ele exporta o seguinte como uma classe padrão:
export default class extends React.Component<AutoSizerProps> {}

Você pode importar isso como AutoSizer assim:
import AutoSizer from 'react-virtualized-auto-sizer';

Eu tive o mesmo problema com a altura sendo 0, e descobri que seus pais precisam ter um tamanho fixo para que funcione.
IMO este 'recurso' remove completamente a necessidade do AutoSizer, já que posso muito bem não usá-lo e dar à criança um tamanho fixo, o efeito é o mesmo.

Dos documentos
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.)

Seria ótimo se pudéssemos passar um prop para substituir esse comportamento e fazer o AutoSizer esticar o pai até seu tamanho.

Tendo o mesmo problema também.

Consegui obter <AutoSizer /> do pacote dedicado trabalhando com react-window até tentar usar ref em <List /> . Não definiria o ref corretamente, então tive que voltar a usar o AutoSizer de react-virtualized .

Estou tendo o mesmo problema, como você corrige isso?

Estou tendo o mesmo problema, como você corrige isso?

Estou usando o <AutoSizer /> padrão novamente

import { AutoSizer } from 'react-virtualized'

O mesmo problema para mim. AutoSizer define a altura como 0 ao usar com a janela de reação. Também estou usando o AutoSizer do react virtualizado com react-window.

documentos originais

Posso usar o AutoSizer em um flex container?

Ao usar um AutoSizer como filho direto de um flex box, geralmente funciona melhor envolvê-lo com um div, assim:

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

Eu lutei com os mesmos erros que vocês, e depois de um tempo, consegui fazer funcionar.
Acontece que você precisa definir a altura e a largura do recipiente externo. Caso contrário, ele não renderizará filhos.
Verifique este exemplo https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312