Reactで複数要素に動的にクリック→スクロールする（createRef, useRef）

7126 ワード
React TypeScript JavaScript CSS useRef CSS テキストリンク

Reactでクリック→スクロールする方法について

Reactで『クリック→該当部分までスクロール』を行う場合、以下のようにcreateRefを使用することがありました。

App.tsx
const ref = createRef<HTMLDivElement>()

ここで定義したrefをスクロールさせたい箇所に渡して、

App.tsx
const handleJump = useCallback(() => {
  ref!.current!.scrollIntoView({ behavior: "smooth" })
}, [ref])

クリック時にスクロールするよう関数を定義する。すると以下のようにクリック→スクロールができます。

ソースコードは以下を参照いただければ幸いです。
CodeSandbox

ですが、これだとスクロール箇所が増える度に、ユニークなrefを定義していく必要があるので、
複数の要素に動的にスクロールさせることを検討しました。

結論

以下がソースコードです。
CodeSandbox

App.tsx
type Item = {
  title: string;
  background: string;
  service: string;
  otherContent?: boolean;
};

const items: Item[] = [
  { title: "コンテンツ1", background: "skyblue", service: "サービス1" },
  { title: "コンテンツ2", background: "yellow", service: "サービス2" },
  { title: "コンテンツ3", background: "green", service: "サービス3", otherContent: true }
];

↑のような配列のデータがある場合、

App.tsx
  const pageRef = useRef(items.map(() => createRef<HTMLDivElement>()));

  const scrollToView = (id: number) => {
    pageRef.current[id]!.current!.scrollIntoView({ behavior: "smooth" });
  };

↑のコードのように
- mapを使ってrefの配列を作り
- 関数（scrollToView）の引数にはidを受け取る

とすることでrefを何度も定義せずに動的にクリック→スクロールをさせることができました！

参考