【React】react-window Fixed Size List

react-window の Fixed Size List を使用します。

react-windowについては以下を参照して下さい。

実装

サンプル

今回は4つのイメージ(サムネイルパス一覧)を表示する Fixed Size List を実行してみました。

import './App.css';
import React from 'react';
import {FixedSizeList} from 'react-window';

const img_path_list = [
  "https://dennie.tokyo/norway/img/photos/P1014659.jpg",
  "https://dennie.tokyo/norway/img/photos/P1014660.jpg",
  "https://dennie.tokyo/norway/img/photos/P1014661.jpg",
  "https://dennie.tokyo/norway/img/photos/P1014662.jpg"
]

function App() {

  const RenderItem = ({index, style}) => {
    return (
      <div style={style}>
        <img src={img_path_list[index]} />
      </div>
    );
  }

  return (
    <FixedSizeList
      height={700}
      width={1200}
      itemSize={600}
      itemCount={img_path_list.length}
    >
      {RenderItem}
    </FixedSizeList>
  );
}

export default App;

結果

説明

FixedSizeList コンポーネント

いくつかのプロパティが設定出来ます。

プロパティ

height
仮想リスト(表示されるリスト)の高さを設定出来ます。下記赤枠縦(700)

width
仮想リスト(表示されるリスト)の幅を設定出来ます。下記赤枠横(1200)

itemSize
仮想リスト内に表示されるアイテムの高さを設定出来ます。下記青枠縦(600)

itemCount
データの件数を設定します。

レンダープロップ

FixedSizeListの子要素にはレンダープロップを指定します。引数が決まっていて index と style を指定します。index はデータのインデックス。今回はサムネイルパス一覧(img_path_list)のインデックスになります。styleはレンダープロップに適用するstyle属性になります。style属性を割り当てる決まりのようです。

  const RenderItem = ({index, style}) => {
    return (
      <div style={style}>
        <img src={img_path_list[index]} />
      </div>
    );
  }

最後に

次回はこのリストをレスポンシブに対応します。

コメントを残す

メールアドレスが公開されることはありません。

© DeNnie.Lab All Rights Reserved.