ループで生成した要素にuseRefを使う 🔁

creareRefを使ってrefを要素分つくるのが良いみたいです。

import { createRef, useRef } from 'react';

const list = ['🐭', '🐮', '🐯'];

export default function Indexpage() {
  const listRefs = useRef([]);

  list.forEach((_, i) => {
    listRefs.current[i] = createRef();
  });

  return (
    <ol>
      { list.map((item, i) => {
        return (
          <li key={ i } ref={ listRefs.current[i] }>{ item }</li>
        );
      }) }
    </ol>
  );
}

ポイントはこの部分、

list.forEach((_, i) => {
  listRefs.current[i] = createRef();
});

createRefを使ってrefを作っているのですが、

list.forEach((_, i) => {
  listRefs.current.push(createRef());
});

と、pushを使ってしてしまうと、レンダリングの度にどんどん無意味なrefが増えていってしまうので注意が必要です。

ちなみに、TypeScriptで書くとこんな感じです。

import { createRef, RefObject, useRef } from 'react';

const list = ['🐭', '🐮', '🐯'];

export default function Indexpage() {
  const listRefs = useRef<RefObject<HTMLLIElement>[]>([]);

  list.forEach((_, i) => {
    listRefs.current[i] = createRef<HTMLLIElement>();
  });

  return (
    <ol>
      { list.map((item, i) => {
        return (
          <li key={ i } ref={ listRefs.current[i] }>{ item }</li>
        );
      }) }
    </ol>
  );
}