React中如何获取依赖输入参数的动态DOM元素引用？

原代码失效的核心原因 #

• 拼写错误：Reeact.useRef存在拼写偏差，运行时会直接抛出引用错误，组件无法正常渲染
• 渲染逻辑错误：组件返回值是包裹JSX的普通对象，而非可渲染的React元素，页面无法正常展示内容
• 自定义组件ref无法透传：普通函数组件默认不会接收ref属性，传入的ref不会关联到内部的真实DOM节点
• 引用不更新的根因：组件ref绑定机制失效后，新增列表项时，旧节点的ref不会被自动解绑，新节点的ref不会被正确绑定，导致ref永远停留在初始化时的旧节点上
• 判断逻辑不可靠：直接用item == items.last()判断是否为最后一项，若列表项是运行时生成的对象（非固定引用），会出现判断偏差，无法正确匹配最后一项

无DOM选择器的干净实现方案 #

核心逻辑是依托React原生的ref生命周期管理，全程不需要手动查询DOM节点：

1. 先让列表项组件支持ref透传，确保传入的ref能关联到真实DOM
2. 用索引判断列表项是否为当前最后一项，比对象引用比对更可靠
3. 仅给最后一项绑定ref对象，利用React的ref自动解绑/绑定机制，实现引用随列表动态更新

参考代码 #

// React 18及以下版本：用forwardRef实现列表项的ref透传
const Item = React.forwardRef(({ content }, ref) => {
  // 把外层传入的ref直接绑定到内部真实的li DOM节点上
  return <li ref={ref}>{content}</li>
})
const TODO = ({ items }) => {
  // 初始化ref，默认值设为null
  const lastItemRef = React.useRef(null)
  return (
    <ul>
      {items.map((item, index) => {
        // 用索引判断是否为最后一项，避免对象引用比对失效
        const isLastItem = index === items.length - 1
        return (
          <Item
            key={item.id}
            content={item.content}
            // 仅最后一项绑定ref，其余项传入undefined触发自动解绑
            ref={isLastItem ? lastItemRef : undefined}
          />
        )
      })}
    </ul>
  )
}

方案的工作逻辑 #

• 当新增列表条目时，原本的最后一项会从“绑定lastItemRef”变为“不绑定ref”，React会自动将lastItemRef.current重置为null
• 新的最后一项会触发ref绑定逻辑，React自动把新DOM节点的引用赋值给lastItemRef.current
• 整个流程完全由React渲染生命周期托管，不需要手动操作DOM选择器，引用始终和列表最后一项保持同步

注：React 19版本后函数组件可直接接收ref作为prop，不需要额外调用forwardRef，核心绑定逻辑完全一致

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