React-window: オートサイザーはreact-windowでは機能しません

オートサイザーコンポーネントは_間違いなく_このライブラリで動作します。 よくある質問をご覧ください。
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

申し訳ありませんが、Stack Overflowから多くの回答が得られていませんが、この種の質問をするのに適切な場所だと思います（FAQを最初に読んだと仮定します：wink :)

あなたがそれが間違いなく機能すると言ったように、あなたはそれが私のために機能しない理由を私に案内できますか？

すでにFAQを読みましたが、window.innerHeigth / Widthを使用しない限り、ページに画像が表示されないため、高さと幅がゼロであるという問題があります。 私は自分のコードをSOに貼り付けましたが、ドキュメントがあまり役に立たないため、何が問題なのかわかりません。
私の質問をよく理解していただければ幸いです。 plsはより明確にするために私に知らせてください。

ここで同じ問題で実行されます。 私は絶対にそれを動かしません。 デバッグ用のコードの変更：

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

専用パッケージ（ import AutoSizer from "react-virtualized-auto-sizer"; ）のAutoSizerを使用すると、出力が得られません。

react-virtualizedから使用すると（「react-virtualized」から{AutoSizer}をインポート）、次の出力が得られます： 0 0および0 1806

なぜそれが機能しないのか完全に私の心を吹き飛ばします（ codesandboxの例は同じブラウザーで機能します）

ここで同じ問題で実行されます。 私は絶対にそれを動かしません。 デバッグ用のコードの変更：

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

専用パッケージ（ import AutoSizer from "react-virtualized-auto-sizer"; ）のAutoSizerを使用すると、出力が得られません。

react-virtualizedから使用すると（「react-virtualized」から{AutoSizer}をインポート）、次の出力が得られます： 0 0および0 1806

なぜそれが機能しないのか完全に私の心を吹き飛ばします（ codesandboxの例は同じブラウザーで機能します）

同じ問題！ 解決策を見つけましたか？

また、まったく同じ問題が発生します。 react-virtualizedに含まれているバージョンに切り替えると問題が修正されますが、react-windowを使用してスタンドアロンで使用することもお勧めします。

私はここで同じ問題を抱えています。

<List /> refを使おうとするまで、 react-window動作する専用パッケージから<AutoSizer />を取得することができました。 refが正しく設定されないため、 react-virtualizedからAutoSizerの使用に戻す必要がありました。

したがって、ソースコードでは、要素に計算された幅がない場合は、子をレンダリングしないだけのように見えます。 私はまだ実際の実装で遊ぶ必要がありますが、私のコンテナがサイズを持っている限り（固定されているか、flexなどを使用しているかにかかわらず）、出力をレンダリングするようです

他の人を助けることを願っています

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であるという同じ問題を抱えていました、そしてそれが機能するためにその親は固定サイズを持っている必要があることがわかりました。
IMOのこの「機能」は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で親をそのサイズに引き伸ばすことができれば素晴らしいと思います。

同じ問題を抱えています。

<List /> refを使おうとするまで、 react-window動作する専用パッケージから<AutoSizer />を取得することができました。 refが正しく設定されないため、 react-virtualizedからAutoSizerの使用に戻す必要がありました。

私は同じ問題を抱えています。どうすれば修正できますか？

私は同じ問題を抱えています。どうすれば修正できますか？

標準の<AutoSizer />再び使用しています

import { AutoSizer } from 'react-virtualized'

私にとっても同じ問題です。 AutoSizerは、reactウィンドウで使用するときに高さを0に設定します。 また、react-windowで仮想化されたreactの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