本文详解 react 中通过 usestate 管理多视频组件的 `controls` 属性与 css 类切换的正确方式，重点解决因直接修改数组状态导致视图不更新的问题。
在构建多视频画廊（如轮播式单页视频列表）时，一个常见需求是：点击播放按钮后，隐藏该视频的播放图标，并为对应 <video> 元素动态启用原生 controls 控件。但许多开发者会陷入一个关键误区——直接修改 state 数组元素（如 showControls[index] = true），这属于「突变状态（mutating state）」，React 无法检测到变化，因此不会触发重渲染，导致 UI 停滞。
✅ 正确做法：函数式更新 + 不可变操作
useState 的更新必须通过 返回新数组 的方式实现。推荐使用 map 创建副本并仅更新目标索引项：
const playVideo = (index: number) => {
vidRef.current[index]?.play().catch(console.error); // 防止自动播放被阻止报错
setShowControls((prev) =>
prev.map((enabled, idx) => (idx === index ? true : enabled))
);
};? 注意：vidRef.current[index]?.play() 使用可选链确保安全调用；.catch() 捕获因浏览器策略拒绝自动播放而抛出的 Promise rejection。
✅ 控件属性与 className 的条件绑定规范写法
-
<video controls> 属性应传入布尔值（非字符串），React 会自动处理 controls={true} → 渲染 controls 属性，controls={false} → 完全不渲染该属性：
<video src={data.videoURL} controls={showControls[index]} // ✅ 直接传 boolean controlsList="nodownload" ref={(el) => { if (el && !vidRef.current[index]) vidRef.current[index] = el; }} /> -
播放图标 BsPlayCircle 的显隐应使用三元表达式控制 className，避免出现 hiddenfalse 这类无效类名：
<BsPlayCircle className={`text-[#fa9204] text-6xl cursor-pointer ${showControls[index] ? 'hidden' : ''}`} onClick={() => playVideo(index)} />
⚠️ 补充注意事项
- ref 初始化需谨慎：原始代码中 ref={(el) => vidRef.current.push(el)} 会在每次渲染重复追加，导致 vidRef.current 长度失控。应改用带索引校验的赋值方式（如上例所示），或初始化 useRef<VideoElement[]>([]) 并在 useEffect 中预分配长度。
- 初始状态一致性：useEffect 中重置 showControls 是合理设计，但建议配合 videoData 的稳定依赖（如 videoData.length 或 videoData.map(d => d.id)），避免因对象引用变化引发不必要的重置。
- 性能优化（可选）：若视频数量较多，可考虑对每个 <video> 组件提取为独立子组件并使用 React.memo，避免全量重渲染。
通过遵循不可变更新原则、正确绑定布尔属性与条件 className，即可实现多视频画廊中精准、响应式的控件与 UI 状态同步。
