Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe

importiere React von „react“;
importiere ReactDOM von „react-dom“;
importiere {List} von „react-virtualized“;

// Daten als Array von Zeichenfolgen auflisten
Konstante Liste = [
  „Brian Vaughn“,
  // Und so weiter...
];

Funktion rowRenderer({
  Schlüssel, // Eindeutiger Schlüssel innerhalb des Zeilen-Arrays
  index, // Index der Zeile innerhalb der Sammlung
  isScrolling, // Die Liste wird gerade gescrollt
  isVisible, // Diese Zeile ist in der Liste sichtbar (d. h. es handelt sich nicht um eine überscannte Zeile)
  Stil, // Stilobjekt, das auf die Zeile angewendet werden soll (um sie zu positionieren)
}) {
  zurückkehren (
    <div Schlüssel={Schlüssel} Stil={Stil}>
      {Liste[Index]}
    </div>
  );
}

// Rendern Sie Ihre Liste
ReactDOM.render(
  <Liste
    Breite={300}
    Höhe={300}
    Zeilenanzahl={Listenlänge}
    Zeilenhöhe={20}
    rowRenderer={rowRenderer}
  />,
  document.getElementById('Beispiel'),
); 

const ImgHeightComponent = ({ imgUrl, onHeightReady, Höhe, Breite }) => {
  const [Stil, setzeStil] = useState({
    Höhe,
    Breite,
    Anzeige: "Block",
  })
  const getImgWithAndHeight = (url) => {
    returniere neues Promise((lösen, ablehnen) => {
      var img = neues Bild()
      // Ändere die Quelle des Bildes
      img.src = URL
      lass set = null
      const onload = () => {
        wenn (Bildbreite || Bildhöhe) {
          //Bildladen abgeschlossen clearInterval(set)
          auflösen({ Breite: Bildbreite, Höhe: Bildhöhe })
        }
      }
      setze = setzeIntervall(beim Laden, 40)
    })
  }

  useEffect(() => {
    getImgWithAndHeight(imgUrl).then((Größe) => {
      const currentHeight = Größe.Höhe * (Breite / Größe.Breite)
      setzeStil({
        Höhe: aktuelle Höhe,
        Breite: Breite,
        Anzeige: "Block",
      })
      beiHöheBereit(aktuelleHöhe)
    })
  }, [])
  zurück <img src={imgUrl} alt='' style={style} />
}

importiere React, { useState, useEffect, useRef } von 'react'
Stile aus „./index.scss“ importieren
importiere { AutoSizer } von 'react-virtualized/dist/commonjs/AutoSizer'
importiere {Liste} aus 'react-virtualized/dist/commonjs/List'

exportiere Standardklasse DocumentStudy erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Liste: [], 
      Höhen: [],
      autoWidth:900,
      automatische Höhe: 300
    }
  }

  handleHeightReady = (Höhe, Index) => {
    dies.setState(
      (Zustand) => {
        const flag = Zustand.Höhen.some((Element) => Element.Index === Index)
        wenn (!flag) {
          zurückkehren {
            Höhen: [
              ...Staatshöhen,
              {
                Index,
                Höhe,
              },
            ],
          }
        }
        zurückkehren {
          Höhen: Zustandshöhen,
        }
      },
      () => {
        diese.listRef.recomputeRowHeights(index)
      },
    )
  }

  getRowHeight = ({ index }) => {
    const Zeile = dieser.Zustand.Höhen.find((Element) => Element.Index === Index)
    Zeile zurückgeben? Zeilenhöhe: this.state.autoHeight
  }

  renderItem = ({ Index, Schlüssel, Stil }) => {
    const { Liste, automatische Breite, automatische Höhe } = dieser.Zustand
    wenn (dieser.Zustand.Höhen.find((Element) => Element.Index === Index)) {
      zurückkehren (
        <div Schlüssel={Schlüssel} Stil={Stil}>
          <img src={list[index].imgUrl} alt='' style={{width: '100%'}}/>
        </div>
      )
    }

    zurückkehren (
      <div Schlüssel={Schlüssel} Stil={Stil}>
        <Bildhöhenkomponente
          imgUrl={Liste[index].imgUrl}
          Breite = {autoWidth}
          Höhe = {autoHeight}
          onHeightReady={(Höhe) => {
            this.handleHeightReady(Höhe, Index)
          }}
        />
      </div>
    )
  }

  rendern() {
    const { list } = dieser.Zustand
    zurückkehren (
      <>
        <div Stil={{ Höhe: 1000 }}>
          <AutoSizer>
            {({ Breite, Höhe }) => (
              <Liste
                ref={(ref) => (diese.listRef = ref)}
                Breite={Breite}
                Höhe={Höhe}
                overscanRowCount={10}
                Zeilenanzahl={Listenlänge}
                rowRenderer={dieses.renderItem}
                Zeilenhöhe={this.getRowHeight}
              />
            )}
          </AutoSizer>
        </div>
      </>
    )
  }
}