如何通过变量动态指定变量名并批量创建useRef实例？

首先明确：JavaScript里没法直接动态生成ref1、ref2这种命名的独立变量——变量名是静态定义的，没法在运行时根据索引自动生成对应名称的变量。不过可以用两种更实用的方式来实现类似需求：

方案1：用对象存储带编号的Refs #

可以通过循环创建键名为ref1、ref2的对象属性，把每个useRef()实例挂载上去：

const refs = {};
// 这里的5可以替换成你需要的Ref数量
for (let i = 1; i <= 5; i++) {
  refs[`ref${i}`] = useRef();
}

使用的时候直接通过属性名访问，比如refs.ref1或者refs['ref1']，和你想要的ref1变量用法几乎一致。

方案2：用数组存储（更简洁） #

如果不需要严格的ref1这类命名，用数组存储会更简洁，索引对应编号（索引0对应原ref1，索引1对应原ref2，以此类推）：

// 生成包含5个Ref的数组，length值按需调整
const refsArray = Array.from({ length: 5 }, () => useRef());

使用时通过索引访问：refsArray[0]、refsArray[1]，这种写法更适合动态数量的场景，比如根据数据长度生成对应数量的Ref。

为什么你的初步思路没法直接生成命名变量？ #

你用Array.from生成Ref数组后，解构赋值需要提前写出ref1、ref2这些变量名，没法根据索引动态生成，所以如果Ref数量不确定，这种写法就不适用了。上面两种方案能完美解决动态数量的Ref创建需求。

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