React-window: Autosizer tidak bekerja dengan react-window

Komponen pengubah ukuran otomatis _definitely_ berfungsi dengan pustaka ini. Lihat FAQ:
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Maaf, Anda belum mendapat banyak tanggapan dari Stack Overflow, tetapi saya pikir itu masih tempat yang tepat untuk menjawab pertanyaan semacam ini (dengan asumsi Anda telah membaca FAQ terlebih dahulu: wink :)

Seperti yang Anda katakan bahwa ini pasti berhasil, dapatkah Anda membimbing saya mengapa ini tidak berhasil untuk saya?

Saya sudah membaca FAQ, tetapi masalahnya adalah tinggi dan lebar adalah nol karena tidak ada gambar yang ditampilkan di halaman kecuali saya menggunakan window.innerHeigth / Width. Saya telah menempelkan kode saya di SO dan saya tidak tahu apa yang salah dengan itu karena dokumen tidak banyak membantu.
Saya harap Anda memahami pertanyaan saya dengan baik. Tolong beri tahu saya untuk klarifikasi lebih lanjut.

Menjalankan masalah yang sama di sini. Saya benar-benar tidak membuatnya bekerja. Mengubah kode untuk debugging:

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

ketika saya menggunakan AutoSizer dari paket khusus ( import AutoSizer from "react-virtualized-auto-sizer"; ) saya tidak mendapatkan keluaran.

Ketika saya menggunakannya dari react-virtualized (impor {AutoSizer} dari 'react-virtualized') saya mendapatkan output: 0 0 dan 0 1806

Benar-benar mengejutkan saya mengapa tidak berhasil ( contoh codesandbox bekerja pada browser yang sama)

Menjalankan masalah yang sama di sini. Saya benar-benar tidak membuatnya bekerja. Mengubah kode untuk debugging:

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

ketika saya menggunakan AutoSizer dari paket khusus ( import AutoSizer from "react-virtualized-auto-sizer"; ) saya tidak mendapatkan keluaran.

Ketika saya menggunakannya dari react-virtualized (impor {AutoSizer} dari 'react-virtualized') saya mendapatkan output: 0 0 dan 0 1806

Benar-benar mengejutkan saya mengapa tidak berhasil ( contoh codesandbox bekerja pada browser yang sama)

masalah yang sama! apakah kamu sudah menemukan solusinya?

Juga mendapatkan masalah yang sama persis. Beralih ke versi yang termasuk dalam react-virtualized memperbaiki masalah, tetapi saya juga lebih suka menggunakannya mandiri w / react-window.

Saya mengalami masalah yang sama di sini.

Saya bisa mendapatkan <AutoSizer /> dari paket khusus yang bekerja dengan react-window sampai saya mencoba menggunakan ref pada <List /> . Itu tidak akan mengatur ref dengan benar, jadi saya harus beralih kembali menggunakan AutoSizer dari react-virtualized .

jadi dalam kode sumber sepertinya jika tidak ada lebar yang dihitung pada elemen, itu tidak membuat anak-anak. saya masih harus bermain dengan implementasi yang sebenarnya, tetapi sepertinya selama wadah saya memiliki ukuran (apakah tetap atau menggunakan flex atau sesuatu), itu akan membuat hasilnya

berharap itu membantu orang lain

Saya mengalami masalah yang sama saat menggunakan TypeScript.

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

EDIT: Menemukan perbaikan.

Paket @types/react-virtualized-auto-sizer tidak secara eksplisit mendefinisikan komponen AutoSizer .

Sebagai gantinya, ini mengekspor yang berikut sebagai kelas default:
export default class extends React.Component<AutoSizerProps> {}

Anda dapat mengimpor ini sebagai AutoSizer seperti:
import AutoSizer from 'react-virtualized-auto-sizer';

Saya memiliki masalah yang sama dengan tinggi menjadi 0, dan ternyata induknya harus memiliki ukuran tetap agar bisa berfungsi.
IMO 'fitur' ini sepenuhnya menghilangkan kebutuhan akan AutoSizer, karena saya mungkin juga tidak menggunakannya dan memberi anak ukuran tetap, efeknya sama.

Dari dokumen
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.)

Akan lebih bagus jika kita bisa melewatkan prop untuk mengganti perilaku ini dan meminta AutoSizer meregangkan induk ke ukurannya.

Memiliki masalah yang sama juga.

Saya bisa mendapatkan <AutoSizer /> dari paket khusus yang bekerja dengan react-window sampai saya mencoba menggunakan ref pada <List /> . Itu tidak akan mengatur ref dengan benar, jadi saya harus beralih kembali menggunakan AutoSizer dari react-virtualized .

Saya mengalami masalah yang sama bagaimana Anda memperbaikinya?

Saya mengalami masalah yang sama bagaimana Anda memperbaikinya?

Saya menggunakan standar <AutoSizer /> lagi

import { AutoSizer } from 'react-virtualized'

Masalah yang sama untuk saya. AutoSizer menyetel tinggi sebagai 0 saat menggunakan dengan jendela react. Saya juga menggunakan AutoSizer dari react virtualized dengan react-window.

dokumen asli

Dapatkah saya menggunakan AutoSizer dalam wadah fleksibel?

Saat menggunakan AutoSizer sebagai turunan langsung dari kotak fleksibel, biasanya berfungsi paling baik untuk membungkusnya dengan div, seperti:

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

Saya berjuang dengan kesalahan yang sama seperti kalian, dan setelah beberapa saat, saya berhasil memperbaikinya.
Kebetulan Anda perlu mengatur tinggi dan lebar wadah luar. Jika tidak, itu tidak akan membuat anak-anak.
Lihat contoh ini https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js : 277-312