如何使createRef/useRef不以最后一个值为目标。而是去它应该去的地方

在使用React的createRef或useRef时，如果你发现它们总是以最后一个值为目标，而不是它们应该去的地方，这通常是因为你在循环中创建了多个引用，但没有为每个引用分配一个唯一的键或标识符。

基础概念

createRef：这是React的一个类组件API，用于创建一个可以在组件的整个生命周期内保持不变的引用。
useRef：这是React的一个Hooks API，用于函数组件，功能与createRef类似，但它是基于Hooks的，因此只能在函数组件或自定义Hooks中使用。

问题原因

当你在循环中创建多个引用时，例如在一个列表渲染中，如果没有为每个元素分配一个唯一的键，React可能会复用之前的DOM节点，导致ref指向最后一个元素。

解决方法

使用唯一键

确保在渲染列表时为每个元素分配一个唯一的键。这有助于React正确地识别和更新每个元素。

const listItems = items.map((item, index) => (
  <li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
    {item.text}
  </li>
));

在这个例子中，item.id作为唯一键，listItemRefs是一个数组，用于存储每个元素的引用。

使用回调函数

使用回调函数来设置ref，这样可以确保每次渲染时都会调用该函数，从而正确地设置每个元素的引用。

const listItems = items.map((item, index) => (
  <li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
    {item.text}
  </li>
));

应用场景

这种技术通常用于需要直接访问DOM元素的场景，例如：

管理焦点（如自动聚焦表单输入）
触发DOM动画
集成第三方DOM库

示例代码

import React, { useRef } from 'react';

function ListComponent({ items }) {
  const listItemRefs = useRef([]);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
          {item.text}
        </li>
      ))}
    </ul>
  );
}

export default ListComponent;