React中为多元素设置独立ref：两种写法差异及原理疑问

第一种写法失效的原因 #

你直接用ref={refrences.current[index]}时，初始状态下refrences.current是空数组，对应index的位置是undefined。React的ref属性如果接收的是一个值（而非函数），只会把这个值当作已存在的ref对象来处理，不会主动将DOM元素赋值到数组的空槽位里——这种写法只适用于单个独立的useRef()实例，而非数组里的占位项，所以你始终拿不到对应的输入框元素。

第二种写法可行的逻辑 #

第二种用的是回调式Ref，这是React官方支持的ref用法：

• 当组件挂载完成、对应的DOM元素被创建后，React会自动把这个DOM元素作为参数传入回调函数；
• 当组件卸载时，会传入null来清除引用。

你写的element => refrences.current[index] = element，就是让React在input元素挂载后，自动把DOM节点存到ref数组的对应索引位置，后续你就能通过refrences.current[index]直接访问这个输入框的DOM了。

箭头函数中的element指代什么 #

element就是当前这个<input>对应的真实浏览器DOM节点。比如React把input渲染到页面后，会把浏览器生成的<input>DOM对象传给这个回调，你把它存在ref数组里，之后就能直接操作这个DOM（比如设置输入值、调用focus()方法等）。

额外提醒 #

如果你的待办列表有任务增删、排序操作，用数组索引作为ref的位置可能会出现索引错位的问题，建议改用任务的唯一ID作为键（比如用对象存储ref，键为任务ID），避免引用错误。

内容的提问来源于stack exchange，提问作者9ust00learn