react 的 `useref` 必须在组件或自定义 hook 的顶层调用，不能在循环、条件语句或回调中使用；本文将展示如何通过单个 `useref` 管理多个 dom 元素引用，并安全实现基于标签的滚动跳转。
该错误的根本原因在于违反了 React Hooks 的核心规则：Hooks 必须始终在顶层调用，且调用顺序必须稳定。你在 useDivRefs 中对 labels.forEach 内部调用 useRef(null)，相当于在每次迭代中“动态”调用 Hook —— 这不仅破坏了调用顺序的可预测性，也使 React 无法正确关联 ref 与组件渲染周期，因此触发 react-hooks/rules-of-hooks ESLint 报错。
✅ 正确做法是：用一个 useRef 存储数组（或对象），并在 ref 回调函数中动态赋值。这种方式既符合 Hook 规则，又能灵活映射任意数量的 DOM 节点。
以下是推荐的完整实现方案：
import { useRef, useEffect } from 'react';
// ✅ 安全的自定义 Hook：返回带 ref 映射能力的对象
const useDivRefs = (labels) => {
const refs = useRef({});
// 初始化 refs 对象（仅在首次渲染时设置 key，避免重复覆盖）
useEffect(() => {
labels.forEach((label) => {
const targetId = label.replace(/\s+/g, '');
if (!(targetId in refs.current)) {
refs.current[targetId] = null;
}
});
}, [labels]);
return refs;
};
const MyComponent = () => {
const labels = ['div 1', 'div 2', 'div 3'];
// 使用自定义 Hook 获取统一 ref 容器
const divRefs = useDivRefs(labels);
// 滚动到指定标签区域的辅助函数
const scrollToSection = (label) => {
const targetId = label.replace(/\s+/g, '');
const el = divRefs.current[targetId];
if (el) {
el.scrollIntoView({ behavior: 'smooth' });
}
};
return (
<div>
{/* 导航栏 */}
<nav>
{labels.map((label) => (
<button
key={label}
onClick={() => scrollToSection(label)}
style={{ margin: '0 8px' }}
>
Go to {label}
</button>
))}
</nav>
{/* 可滚动内容区 */}
<main>
{labels.map((label, i) => {
const targetId = label.replace(/\s+/g, '');
return (
<section
key={label}
id={targetId} // 同时提供 id，兼容锚点跳转
ref={(el) => {
if (el) divRefs.current[targetId] = el;
}}
style={{
minHeight: '100vh',
padding: '40px 20px',
backgroundColor: i % 2 === 0 ? '#f9f9f9' : '#fff',
}}
>
<h2>{label}</h2>
<p>This is section {i + 1}. Scroll down to see more.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1954" title="Anyword"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d1e234f14574.png" alt="Anyword" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1954" title="Anyword">Anyword</a>
<p>AI文案写作助手和文本生成器，具有可预测结果的文案 AI</p>
</div>
<a href="/ai/1954" title="Anyword" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section>
);
})}
</main>
</div>
);
};
export default MyComponent;? 关键要点说明：
- useRef({}) 创建一个持久化的可变对象容器，其 .current 属性可随时写入任意键值（如 refs.current['div1'] = domNode）；
- 使用 ref 回调函数（ref={(el) => {...}}）而非 useRef() 多次调用，确保每个元素挂载/卸载时精准更新引用；
- useEffect 用于初始化 refs.current 的键结构（可选，提升代码健壮性）；
- 支持 id 属性 + scrollIntoView 组合，兼顾语义化 HTML 和无障碍访问（a11y）。
⚠️ 注意事项：
- 不要直接在 ref 回调中调用 setState（如 setX(...)），否则可能引发无限循环；
- 若需在 useEffect 中读取这些 ref，请添加依赖项 divRefs 并使用 divRefs.current 访问；
- 避免在服务端渲染（SSR）环境中依赖 ref.current 值（此时为 null），应配合 useEffect 或 if (typeof window !== 'undefined') 判断。
通过这种模式，你既能优雅管理动态数量的 DOM 引用，又完全遵守 React 的 Hook 规范，为后续实现平滑滚动、动画联动或焦点控制打下坚实基础。
