React-window: Autosizer no funciona con react-window

El componente de dimensionador automático _definitely_ trabaja con esta biblioteca. Consulte las preguntas frecuentes:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Lamento que no hayas recibido mucha respuesta de Stack Overflow, pero creo que ese sigue siendo el lugar adecuado para este tipo de preguntas (suponiendo que hayas leído las preguntas frecuentes primero: guiño :)

Como dijiste que definitivamente funciona, ¿puedes guiarme por qué no funciona para mí?

Ya leí las preguntas frecuentes, pero el problema es que la altura y el ancho son cero debido a que no se muestra ninguna imagen en la página a menos que use window.innerHeigth / Width. He pegado mi código en SO y no sé qué tiene de malo porque los documentos no están ayudando mucho.
Espero que haya entendido bien mi pregunta. Por favor, hágamelo saber para más aclaraciones.

Ejecutando el mismo problema aquí. Absolutamente no lo hago funcionar. Cambiar el código de depuración:

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

cuando utilizo AutoSizer del paquete dedicado ( import AutoSizer from "react-virtualized-auto-sizer"; ) no obtengo salida.

Cuando lo uso desde react-virtualized (importar {AutoSizer} desde 'react-virtualized') obtengo los resultados: 0 0 y 0 1806

Me sorprende completamente por qué no funciona (el

Ejecutando el mismo problema aquí. Absolutamente no lo hago funcionar. Cambiar el código de depuración:

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

cuando utilizo AutoSizer del paquete dedicado ( import AutoSizer from "react-virtualized-auto-sizer"; ) no obtengo salida.

Cuando lo uso desde react-virtualized (importar {AutoSizer} desde 'react-virtualized') obtengo los resultados: 0 0 y 0 1806

Me sorprende completamente por qué no funciona (el

el mismo problema! has encontrado una solución?

También obteniendo exactamente el mismo problema. Cambiar a la versión incluida en react-virtualized soluciona el problema, pero también preferiría usarlo de forma independiente con react-window.

Tengo el mismo problema aquí.

Pude obtener <AutoSizer /> del paquete dedicado que funcionaba con react-window hasta que intenté usar ref en <List /> . No establecería la referencia correctamente, así que tuve que volver a usar AutoSizer desde react-virtualized .

por lo que en el código fuente parece que si no hay un ancho calculado en el elemento, simplemente no representa a los niños. todavía tengo que jugar con la implementación real, pero parece que mientras mi contenedor tenga un tamaño (ya sea fijo o usando flex o algo así), representará la salida

espero que ayude a otros

Tengo el mismo problema con TypeScript.

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

EDITAR: Encontré una solución.

El paquete @types/react-virtualized-auto-sizer no define explícitamente un componente AutoSizer .

En su lugar, exporta lo siguiente como clase predeterminada:
export default class extends React.Component<AutoSizerProps> {}

Puede importar esto como AutoSizer así:
import AutoSizer from 'react-virtualized-auto-sizer';

Tuve el mismo problema con la altura de 0, y resultó que sus padres deben tener un tamaño fijo para que funcione.
En mi opinión, esta 'función' elimina por completo la necesidad de AutoSizer, ya que también puedo no usarlo y darle al niño un tamaño fijo, el efecto es el mismo.

De los 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.)

Sería genial si pudiéramos pasar un accesorio para anular este comportamiento y hacer que AutoSizer estire el padre a su tamaño.

También tengo el mismo problema.

Pude obtener <AutoSizer /> del paquete dedicado que funcionaba con react-window hasta que intenté usar ref en <List /> . No establecería la referencia correctamente, así que tuve que volver a usar AutoSizer desde react-virtualized .

Tengo el mismo problema, ¿cómo lo solucionas?

Tengo el mismo problema, ¿cómo lo solucionas?

Estoy usando el estándar <AutoSizer /> nuevo

import { AutoSizer } from 'react-virtualized'

El mismo problema para mí. AutoSizer establece la altura en 0 cuando se usa con la ventana de reacción. También estoy usando AutoSizer de react virtualized con react-window.

documentos originales

¿Puedo usar AutoSizer dentro de un contenedor flexible?

Cuando se usa un AutoSizer como hijo directo de una caja flexible, generalmente funciona mejor envolverlo con un div, así:

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

Luché con los mismos errores que ustedes, y después de un tiempo, logré que funcionara.
Sucede que debe establecer la altura y el ancho del contenedor exterior. De lo contrario, no producirá hijos.
Consulte este ejemplo https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312