本文讲解如何规避“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 规则，又能灵活支持动态数量的元素。
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
✅ 推荐实现方案（推荐用于滚动定位等场景）
import { useRef, useEffect } from 'react';
// 自定义 Hook：返回一个 refs 数组容器和初始化函数
const useDivRefs = (length: number) => {
const refs = useRef<(HTMLDivElement | null)[]>([]);
// 确保 refs.current 长度匹配（避免 stale length）
useEffect(() => {
if (refs.current.length < length) {
refs.current = Array(length).fill(null);
}
}, [length]);
return refs;
};
const MyComponent = () => {
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>
);
})}
{/* 导航按钮示例 */}
<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<T[]>，其 .current 属性可被任意修改，适合存储 DOM 节点列表。
- 若需响应 labels 动态变化（如增删），建议配合 useEffect 清理或重置 refs.current，避免引用残留。
✅ 总结
要为动态生成的元素创建多个引用，核心思路是：
- 单次顶层 useRef 创建容器（如 useRef<HTMLDivElement[]>([])）；
- 用回调 ref 将节点逐个写入该容器；
- 通过索引安全访问（如 refs.current[i]）完成滚动、聚焦等交互。
这样既彻底规避了 Rules of Hooks 报错，又保持了代码的可维护性与性能（无重复渲染、无额外 Hook 开销）。
