React-window: Autosizer не работает с реактивным окном

Компонент автоматического определения размера _ определенно_ работает с этой библиотекой. Ознакомьтесь с часто задаваемыми вопросами:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Извините, что вы не получили большого ответа от Stack Overflow, но я думаю, что это все еще подходящее место для такого рода вопросов (при условии, что вы сначала прочитали часто задаваемые вопросы: wink :)

Как вы сказали, что это определенно работает, не могли бы вы объяснить мне, почему это не работает для меня?

Я уже читал ответы на часто задаваемые вопросы, но проблема в том, что высота и ширина равны нулю, из-за чего на странице не отображается изображение, если я не использую window.innerHeigth / Width. Я вставил свой код в SO, и я не знаю, что с ним не так, потому что документы мало помогают.
Надеюсь, вы хорошо поняли мой вопрос. Пожалуйста, дайте мне знать для получения дополнительных разъяснений.

Здесь работает та же проблема. Я абсолютно не могу заставить его работать. Изменение кода для отладки:

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

когда я использую AutoSizer из специального пакета ( import AutoSizer from "react-virtualized-auto-sizer"; ), я не получаю никаких результатов.

Когда я использую его из react-virtualized (импорт {AutoSizer} из 'react-virtualized'), я получаю следующие результаты: 0 0 и 0 1806

Совершенно поражает меня, почему это не работает ( пример codeandbox работает в том же браузере)

Здесь работает та же проблема. Я абсолютно не могу заставить его работать. Изменение кода для отладки:

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

когда я использую AutoSizer из специального пакета ( import AutoSizer from "react-virtualized-auto-sizer"; ), я не получаю никаких результатов.

Когда я использую его из react-virtualized (импорт {AutoSizer} из 'react-virtualized'), я получаю следующие результаты: 0 0 и 0 1806

Совершенно поражает меня, почему это не работает ( пример codeandbox работает в том же браузере)

такая же проблема! вы нашли решение?

Также возникает такая же проблема. Переключение на версию, включенную в react-virtualized, устраняет проблему, но я бы также предпочел использовать ее отдельно с реактивным окном.

У меня такая же проблема.

Мне удалось получить <AutoSizer /> из специального пакета, работающего с react-window пока я не попытался использовать ref на <List /> . Это не привело бы к правильной установке ref, поэтому мне пришлось вернуться к использованию AutoSizer с react-virtualized .

поэтому в исходном коде кажется, что если у элемента нет рассчитанной ширины, он просто не отображает дочерние элементы. Мне все еще нужно поиграть с фактической реализацией, но похоже, что пока мой контейнер имеет размер (фиксированный или с использованием гибкости или чего-то еще), он будет отображать вывод

надеюсь, что это поможет другим

У меня такая же проблема с TypeScript.

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

РЕДАКТИРОВАТЬ: нашел исправление.

Пакет @types/react-virtualized-auto-sizer явно не определяет компонент AutoSizer .

Вместо этого он экспортирует в качестве класса по умолчанию следующее:
export default class extends React.Component<AutoSizerProps> {}

Вы можете импортировать это как AutoSizer вот так:
import AutoSizer from 'react-virtualized-auto-sizer';

У меня была такая же проблема с высотой, равной 0, и оказалось, что его родитель (ы) должен иметь фиксированный размер, чтобы он работал.
ИМО, эта «функция» полностью устраняет необходимость в AutoSizer, так как я могу просто не использовать ее и дать ребенку фиксированный размер, эффект тот же.

Из документов
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.)

Было бы здорово, если бы мы могли передать опору, чтобы переопределить это поведение и заставить AutoSizer растянуть родительский элемент до его размера.

У меня такая же проблема.

Мне удалось получить <AutoSizer /> из специального пакета, работающего с react-window пока я не попытался использовать ref на <List /> . Это не привело бы к правильной установке ref, поэтому мне пришлось вернуться к использованию AutoSizer с react-virtualized .

У меня такая же проблема, как вы ее исправить?

У меня такая же проблема, как вы ее исправить?

Я снова использую стандартный <AutoSizer />

import { AutoSizer } from 'react-virtualized'

То же самое для меня. AutoSizer устанавливает высоту как 0 при использовании с окном реакции. Я также использую AutoSizer из реакции, виртуализированной с помощью окна реакции.

оригинальные документы

Могу ли я использовать AutoSizer в гибком контейнере?

При использовании AutoSizer в качестве прямого дочернего элемента гибкого блока обычно лучше всего обернуть его элементом div, например:

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

Я боролся с теми же ошибками, что и вы, и через некоторое время мне удалось заставить его работать.
Бывает, что нужно установить высоту и ширину внешнего контейнера. В противном случае он не будет отображать дочерние элементы.
Посмотрите этот пример https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312