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が増えていってしまうので注意が必要です。