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 哲学的解法。
