react-virtualized を使用して、動的な高さを持つ画像の長いリストを実装する

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'react-virtualized' から {List} をインポートします。

// データを文字列の配列としてリストします
定数リスト = [
  「ブライアン・ヴォーン」
  // 等々...
];

関数 rowRenderer({
  key, // 行の配列内の一意のキー
  index, // コレクション内の行のインデックス
  isScrolling, // リストは現在スクロール中です
  isVisible, // この行はリスト内に表示されます (つまり、オーバースキャンされた行ではありません)
  style, // 行に適用されるスタイル オブジェクト (配置するため)
}) {
  戻る （
    <div キー = {キー} スタイル = {スタイル}>
      {リスト[インデックス]}
    </div>
  );
}

// リストをレンダリングする
ReactDOM.render() は、
  <リスト
    幅={300}
    高さ={300}
    rowCount={リストの長さ}
    行の高さ={20}
    行レンダラー = {行レンダラー}
  />,
  document.getElementById('例')、
); 

const ImgHeightComponent = ({ imgUrl, onHeightReady, 高さ, 幅 }) => {
  const [スタイル、setStyle] = useState({
    身長、
    幅、
    表示: 'ブロック'、
  })
  const getImgWithAndHeight = (url) => {
    新しい Promise を返します ((resolve, reject) => {
      var img = 新しい画像()
      // 画像のsrcを変更する
      img.src = URL
      set = null とする
      定数onload = () => {
        if (画像の幅 || 画像の高さ) {
          //画像の読み込みが完了しました clearInterval(set)
          解決({ 幅: img.width, 高さ: img.height })
        }
      }
      設定 = setInterval(onload, 40)
    })
  }

  使用効果(() => {
    getImgWithAndHeight(imgUrl).then((サイズ) => {
      定数 currentHeight = size.height * (幅 / size.width)
      スタイルを設定する({
        高さ: 現在の高さ、
        幅: 幅、
        表示: 'ブロック'、
      })
      onHeightReady(現在の高さ)
    })
  }, [])
  <img src={imgUrl} alt='' style={style} /> を返します
}

'react' から React、{useState、useEffect、useRef} をインポートします。
'./index.scss' からスタイルをインポートします
'react-virtualized/dist/commonjs/AutoSizer' から { AutoSizer } をインポートします。
'react-virtualized/dist/commonjs/List' から {List} をインポートします。

デフォルトのクラスDocumentStudyをエクスポートし、React.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具)
    この状態 = {
      リスト: [], 
      高さ: [],
      自動幅:900、
      自動高さ: 300
    }
  }

  handleHeightReady = (高さ, インデックス) => {
    this.setState() は、
      （状態） => {
        const flag = state.heights.some((item) => item.index === index)
        if (!フラグ) {
          戻る {
            高さ: [
              ...州の高さ、
              {
                索引、
                身長、
              },
            ]、
          }
        }
        戻る {
          高さ: state.heights、
        }
      },
      () => {
        this.listRef.recomputeRowHeights(インデックス)
      },
    ）
  }

  getRowHeight = ({ インデックス }) => {
    定数 row = this.state.heights.find((item) => item.index === インデックス)
    行を返します? row.height: this.state.autoHeight
  }

  renderItem = ({ インデックス、キー、スタイル }) => {
    const { リスト、自動幅、自動高さ } = this.state
    if (this.state.heights.find((item) => item.index === index)) {
      戻る （
        <div キー = {キー} スタイル = {スタイル}>
          <img src={list[index].imgUrl} alt='' style={{width: '100%'}}/>
        </div>
      ）
    }

    戻る （
      <div キー = {キー} スタイル = {スタイル}>
        <画像高さコンポーネント
          imgUrl={リスト[インデックス].imgUrl}
          幅={自動幅}
          高さ={自動高さ}
          onHeightReady={(高さ) => {
            this.handleHeightReady(高さ、インデックス)
          }}
        />
      </div>
    ）
  }

  与える（） {
    const { リスト } = this.state
    戻る （
      <>
        <div スタイル = {{ 高さ: 1000 }}>
          <オートサイザー>
            {({ 幅, 高さ }) => (
              <リスト
                ref={(ref) => (this.listRef = ref)}
                幅={幅}
                高さ={高さ}
                オーバースキャン行数={10}
                rowCount={リストの長さ}
                rowRenderer={this.renderItem}
                行の高さ={this.getRowHeight}
              />
            )}
          </オートサイザー>
        </div>
      </>
    ）
  }
}