React.jsでスクロール可能なリストコンポーネントの作り方

方法1: CSSを使用したスクロール可能なリスト まず、CSSを使用してスクロール可能なリストを作成する方法を見てみましょう。

import React from 'react';
import './ScrollableList.css';
const ScrollableList = () => {
  return (
    <div className="scrollable-list">
      <ul>
        {Array.from({ length: 100 }, (_, index) => (
          <li key={index}>Item {index}</li>
        ))}
      </ul>
    </div>
  );
};
export default ScrollableList;

上記の例では、ScrollableListコンポーネント内にscrollable-listというCSSクラスを持つdiv要素があります。このクラスには、高さやオーバーフローなどのスクロールに関連するスタイルが含まれています。ul要素内には表示するリストアイテムがあります。この例では、100個のアイテムが表示されます。

次に、CSSファイル（ScrollableList.css）を作成し、スクロールに関連するスタイルを追加します。

.scrollable-list {
  height: 300px;
  overflow: auto;
}

上記のCSSでは、scrollable-listクラスの要素の高さを300ピクセルに設定し、必要に応じてスクロールバーを表示します。

方法2: Reactライブラリを使用したスクロール可能なリスト もう一つの方法は、サードパーティのReactライブラリを使用することです。例として、react-virtualizedライブラリを使用してスクロール可能なリストを作成する方法を見てみましょう。

まず、react-virtualizedライブラリをインストールします。

npm install react-virtualized

次に、以下のようにコードを記述します。

import React from 'react';
import { List } from 'react-virtualized';
const ScrollableList = () => {
  const rowRenderer = ({ index, key, style }) => (
    <div key={key} style={style}>Item {index}</div>
  );
  return (
    <List
      rowCount={100}
      rowHeight={20}
      width={300}
      height={300}
      rowRenderer={rowRenderer}
    />
  );
};
export default ScrollableList;

上記の例では、react-virtualizedライブラリのListコンポーネントを使用しています。rowCountプロパティには表示するアイテムの総数を指定し、rowHeightプロパティには各アイテムの高さを指定します。widthとheightプロパティにはリストの幅と高さを指定します。rowRendererプロパティには各行の描画方法を指定します。