React中数组输入框Ref出现Null类型的原因解析

为什么ref回调的el会是null？ #

这确实是React生命周期的特性导致的：

• 当组件挂载时，React会调用ref回调，传入对应的DOM元素（这里就是HTMLInputElement）。
• 当组件卸载时，React会再次调用ref回调，传入null——目的是让你清理对已卸载DOM元素的引用，避免内存泄漏。

具体到你的场景：哪怕现在数组长度固定为3，React的类型系统依然会考虑到后续可能的变化（比如数组长度缩减，某个输入框被移除卸载），此时对应的ref回调就会收到null，所以给el标注了HTMLInputElement | null的联合类型。

如何修正类型问题？ #

你需要将inputsRef的类型定义调整为包含null的数组：

import { useRef } from 'react';

export default function SomeArray(){
  // 调整类型为(HTMLInputElement | null)[]，初始值为空数组
  const inputsRef = useRef<(HTMLInputElement | null)[]>([])

  return <>{[1,2,3].map((_,i) => (
    <input key={i} ref={el => inputsRef.current[i] = el} />
  ))}</>
}

注意：给循环生成的元素加上key属性，这是React列表渲染的最佳实践，能避免不必要的重渲染和DOM操作异常。

安全使用这些Ref #

当你需要访问某个输入框的DOM元素时，记得先做null检查，避免运行时错误：

// 示例：聚焦第二个输入框
const focusSecondInput = () => {
  const secondInput = inputsRef.current[1];
  if (secondInput) {
    secondInput.focus();
  }
};

内容的提问来源于stack exchange，提问作者Michał Sadowski