React中useState控制高亮行失效的主因是状态更新未触发重渲染或依赖项不匹配，需确保activeRowId正确绑定到JSX、类型一致、虚拟滚动范围正确，并解决CSS优先级与背景遮挡问题。
React 中 useState 控制高亮行失效？检查依赖和更新时机
常见现象是点击某行后背景不变，或所有行一起变色。根本原因往往是状态更新没触发重渲染，或 usestate 的依赖项没对齐。
- 确保高亮状态变量（如
activeRowId）被用在 JSX 的 className 或 style 计算中，而不是仅存在逻辑里 - 点击事件里必须调用
setActiveRowId，且传入的值要和每行的唯一标识（如row.id）严格一致——类型也要匹配（"1"和1不等价） - 如果表格用了虚拟滚动或分页，确认当前被点的行数据还在渲染范围内；否则状态变了，但 DOM 没重绘
CSS 里用 :hover 和 .active 冲突怎么办？优先级与作用域隔离
鼠标悬停时颜色正常，但点击后不保留高亮，大概率是 :hover 覆盖了 .active 样式，或者 class 名没正确绑定到 tr/td 元素上。
- 写 CSS 时把
.active放在:hover后面，或提高权重：tr.active { background-color: #e3f2fd !important; } - 避免直接给
tr设背景色却忘了td默认有 background，导致高亮“被遮住”——统一在tr.active td上设背景更稳妥 - 如果用 CSS-in-JS（如 styled-components），确保 active 状态通过 props 正确透传，且样式规则没有被父组件的
!important覆盖
Vue 中 v-bind:class 绑定 active 行失败？对象语法比数组更可控
错误表现为点击后 class 没加上，或加错位置。Vue 的响应式追踪对对象属性敏感，数组语法容易漏掉响应式更新。
- 推荐用对象语法：
:class="{ 'active': row.id === activeRowId }"，比:class="['row', activeRowId === row.id ? 'active' : '']"更可靠 - 确保
activeRowId是响应式数据（ref或data里的属性），不要用普通 const 变量 - 如果表格用
v-for渲染，key 必须是稳定唯一值（如:key="row.id"），否则 Vue 可能复用 DOM 导致 class 错乱
原生 JS 表格高亮后滚动消失？事件委托 + 动态 class 切换更健壮
纯 HTML 表格加 JS 实现时，常遇到：点完高亮，一滚动就没了，或者多行同时高亮。本质是没清理旧状态，或监听器没绑定到正确容器上。
- 用事件委托，把 click 监听器挂在
table或tbody上，再用e.target.closest('tr')找到目标行，避免为每行单独绑定 - 每次点击前先清除已有
.active类：document.querySelector('tr.active')?.classList.remove('active') - 注意 tbody 里可能有空行、合并单元格（
rowspan），e.target可能是 td 而非 tr，需向上找最近的 tr
