# React 如何给列表渲染的各个元素添加 Ref

下面是一种写法

import { useRef } from 'react'
const App = () => {
  const preset = Array(10)
    .fill('')
    .map((_, index) => index)
  const Refs = preset.map(() => useRef(null))
  return (
    <div className='list'>
      {preset.map((elem, index) => (
        <div ref={Refs[index]} className='item' key={elem}>
          {elem}
        </div>
      ))}
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这里集中介绍了其他的可行的办法 -> StackOverflow (opens new window)

需要注意的是，处理列表元素时，首选尝试把相关的监听委托给父元素等办法

因为同时保留大量 Dom 元素的引用，可能会导致性能问题，非必要时个人不太建议给列表元素都增加 Ref