在 react 视频画廊中，直接修改 usestate 数组元素（如 `arr[i] = true`）不会触发重渲染；必须通过 `setstate` 函数式更新并返回新数组，才能使 `controls` 属性和 `classname` 条件生效。
React 的核心原则之一是状态不可变（immutability）：你不能直接修改 useState 返回的状态值（例如对数组进行索引赋值），否则 React 无法检测到变化，也就不会触发组件重渲染——这正是你遇到的问题根源：showControls[index] = true 属于状态突变（state mutation），虽能改变数组内容，但 showControls 的引用未变，React 认为“状态没变”，因此
✅ 正确做法是使用函数式更新（functional update），基于前一个状态生成一个全新数组：
const playVideo = (index: number) => {
vidRef.current[index]?.play(); // 安全调用，避免空引用
setShowControls((prev) =>
prev.map((enabled, idx) => (idx === index ? true : enabled))
);
};这段代码确保每次点击都产生一个新数组，React 能准确识别变化并重渲染对应
? 同时注意 JSX 中的条件写法：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：controls={showControls[index] ? "controls" : ""}
虽语法合法，但推荐更语义化的布尔写法； - ✅ 推荐：controls={showControls[index]} —— React 会自动将 true 渲染为 controls 属性，false 则完全省略，语义清晰且符合 HTML 标准。
对于 CSS 类名控制，也应避免拼接布尔值（如 showControls[index] && 'hidden' 可能生成 'false' 字符串）：
<BsPlayCircle
className={`text-[#fa9204] text-6xl cursor-pointer ${showControls[index] ? 'hidden' : ''}`}
onClick={() => playVideo(index)}
value={data.videoURL}
/>? 额外优化建议：
- 使用 useRef 初始化 vidRef 时，应预设长度或用回调 ref 避免重复 push（当前 ref={(el) => vidRef.current.push(el)} 在重渲染时可能重复添加）；
- 可考虑「播放互斥」逻辑：点击新视频时，自动暂停前一个正在播放的视频（需维护 activeIndex 或遍历 vidRef.current 调用 pause()）；
- 若视频较多，建议配合 preload="metadata" + poster 属性提升首屏体验。
总结：React 状态更新必须“不可变”——用 map/filter/concat 等方法生成新数组，而非直接赋值；所有依赖状态的 DOM 属性（controls）与样式（className）都将随之精准响应。
