ReactuseRef多个DOM引用创建方法详解

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《React useRef 创建多个 DOM 引用方法详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

React Hook 必须在组件顶层或自定义 Hook 的顶层调用，不能在循环、条件或回调中调用。本文详解如何安全地为动态生成的元素（如列表项）批量创建并管理 ref，避免“cannot be called inside a callback”错误。

该错误的根本原因在于：useRef() 是一个 React Hook，它依赖严格的调用顺序和渲染生命周期来维护内部状态。当你在 labels.forEach(...) 这类普通 JavaScript 回调中调用 useRef(null) 时，React 无法追踪其调用位置与次数，违反了 Rules of Hooks，因此抛出编译期警告（ESLint）及运行时潜在问题。

✅ 正确做法是：用单个 useRef 存储一个数组，再通过函数式 ref（callback ref）动态赋值。这种方式既符合 Hook 规则，又能精准映射每个元素到其对应 DOM 节点。

以下是修复后的完整示例：

import { useRef, useEffect } from 'react';

// ✅ 自定义 Hook：返回一个已初始化的 ref 数组（长度与 labels 一致）
const useDivRefs = (labels) => {
  const refs = useRef([]);
  // 确保 refs.current 数组长度匹配 labels，避免 stale index
  useEffect(() => {
    refs.current = Array(labels.length).fill(null);
  }, [labels.length]);
  return refs;
};

const MyComponent = () => {
  const labels = ['div 1', 'div 2', 'div 3'];

  // ✅ 在组件顶层调用自定义 Hook
  const divRefs = useDivRefs(labels);

  // ✅ 滚动到指定 section 的辅助函数（示例）
  const scrollToSection = (index) => {
    const el = divRefs.current[index];
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      {/* 导航栏 */}
      <nav>
        {labels.map((label, i) => (
          <button
            key={label}
            onClick={() => scrollToSection(i)}
          >
            Go to {label}
          </button>
        ))}
      </nav>

      {/* 可滚动的目标区域 */}
      <main>
        {labels.map((label, i) => {
          const targetId = label.replace(/\s+/g, '');
          return (
            <section
              key={label}
              id={targetId}
              // ✅ 使用函数式 ref：每次渲染时将 DOM 元素存入 refs.current[i]
              ref={(el) => {
                if (el) divRefs.current[i] = el;
              }}
              style={{ scrollMarginTop: '80px' }} // 避免被固定导航栏遮挡
            >
              <h2>{label}</h2>
              <p>This is section {i + 1}.</p>
            </section>
          );
        })}
      </main>
    </div>
  );
};

export default MyComponent;

? 关键要点说明：

• useRef([]) 只调用一次，在组件顶层，完全合规；
• ref={(el) => { ... }} 是函数式 ref，不是 Hook 调用，可安全用于 map 循环内；
• useEffect 初始化 refs.current 确保数组长度稳定，防止因 labels 变化导致索引越界；
• 若需支持动态增删 labels，建议配合 useMemo 或 key 重置逻辑增强健壮性；
• 不要直接修改 refs.current[i] = el（无空值检查），应像示例中加 if (el) 判断，避免卸载后残留无效引用。

? 进阶提示：
若需更类型安全或复用性更强的方案，可封装为通用 Hook（如 useArrayRef），或结合 React.createRef()（不推荐用于动态列表，因无法响应式更新）——但对绝大多数场景，上述 useRef + callback ref 组合是最简洁、高效且符合 React 哲学的解法。

终于介绍完啦！小伙伴们，这篇关于《ReactuseRef多个DOM引用创建方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！