如何在 React 中正确使用 useRef 创建动态引用数组-js教程-PHP中文网

如何在 React 中正确使用 useRef 创建动态引用数组

本文讲解如何规避“react hook 'useref' cannot be called inside a callback”错误，通过 `useref` 持有引用数组并结合回调 ref 实现动态 dom 元素引用管理，适用于滚动定位、焦点控制等场景。

在 React 中，Hooks 的调用必须严格遵守规则：只能在函数组件的顶层或自定义 Hook 的顶层调用，不能在循环、条件语句或回调函数中调用（如 forEach、map 内部）。你原代码中在 labels.forEach(...) 回调里调用 useRef(null)，直接违反了这一规则，因此触发 ESLint 和运行时警告。

✅ 正确做法是：用一个 useRef 容器（如数组）统一管理多个 DOM 引用，并通过回调 ref（callback ref）动态赋值。这种方式既符合 Hooks 规则，又能灵活支持动态数量的元素。

✅ 推荐实现方案（推荐用于滚动定位等场景）

import { useRef, useEffect } from 'react';

// 自定义 Hook：返回一个 refs 数组容器和初始化函数
const useDivRefs = (length: number) => {
  const refs = useRef([]);

  // 确保 refs.current 长度匹配（避免 stale length）
  useEffect(() => {
    if (refs.current.length  {
  const labels = ['div 1', 'div 2', 'div 3'];

  // 创建一个 ref 容器，持有 3 个 null 初始值
  const divRefs = useDivRefs(labels.length);

  // 示例：滚动到指定索引的元素
  const scrollToSection = (index: number) => {
    const el = divRefs.current[index];
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      {/* 渲染带 ref 的元素 */}
      {labels.map((label, i) => {
        const targetId = label.replace(/\s+/g, '');
        return (
          <div key="{targetId}" id="{targetId}" ref="{(el)"> {
              divRefs.current[i] = el; // ✅ 安全：不调用 Hook，仅赋值
            }}
            style={{ scrollMarginTop: '80px' }} // 可选：避免被固定头部遮挡
          >
            <h2>{label}</h2>
            <p>Section content...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10835" title="React 组件生成器"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="React 组件生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10835" title="React 组件生成器" class="overflowclass">React 组件生成器</a>
													<p class="overflowclass">根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10835" title="React 组件生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
          </div>
        );
      })}

      {/* 导航按钮示例 */}
      <nav>
        {labels.map((label, i) => (
          <button key="{`btn-${i}`}" onclick="{()"> scrollToSection(i)}
          >
            Go to {label}
          </button>
        ))}
      </nav>
</div>
  );
};

export default MyComponent;

⚠️ 注意事项

不要在 map/forEach 中调用 useRef：每个 useRef() 调用都必须是顶层静态调用，React 依赖调用顺序来匹配 state/ref。
回调 ref 是安全的副作用操作：ref={(el) => {...}} 是纯赋值逻辑，不涉及 Hook 调用，完全合规。
useRef([]) 返回的是 MutableRefObject，其 .current 属性可被任意修改，适合存储 DOM 节点列表。
若需响应 labels 动态变化（如增删），建议配合 useEffect 清理或重置 refs.current，避免引用残留。