本文介绍在 React 应用中，当点击视频触发模态框（Modal）时，如何可靠暂停当前播放的 元素，解决因 ref 失效或闭包问题导致的暂停失败问题。核心在于使用 useState 管理 DOM 引用，并配合 useCallback 保证依赖更新及时。
本文介绍在 react 应用中，当点击视频触发模态框（modal）时，如何可靠暂停当前播放的 `
在 React 中直接使用 useRef 持有 <video></video> DOM 节点看似简洁，但在组件重渲染、动态挂载/卸载或异步操作场景下，ref.current 可能为 null 或指向旧节点，导致 pause() 调用无效——这正是你遇到“模态框打开后视频仍在后台播放”的根本原因。
更健壮的做法是：用 useState 替代 useRef 来存储视频元素引用。因为 setState 会触发组件重渲染，确保后续 useCallback 依赖的 videoEl 始终为最新值；同时配合 useCallback 包裹暂停逻辑，避免因闭包捕获过期引用而失效。
以下是优化后的完整实现：
import { useState, useCallback } from 'react';
// ✅ 使用 useState 管理 video 元素引用（可触发重渲染，保证状态同步）
const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
// ✅ useCallback + 依赖 [videoEl]，确保 pause() 总是作用于当前有效元素
const pauseVideo = useCallback(() => {
if (videoEl) {
videoEl.pause();
// 可选：重置播放时间，提升用户体验
videoEl.currentTime = 0;
}
}, [videoEl]);
// ✅ 同样建议 memoize openModal，避免无谓重创建
const openModal = useCallback((url: string[], index: number) => {
setImageUrl(url);
setActiveIndex(index);
setIsOpen(true);
}, []);
// ✅ 在 video 标签中使用 setVideoEl 作为 ref 回调函数
<video
ref={setVideoEl} // ⚠️ 注意：不是 ref={videoEl}，而是 ref={setVideoEl}
controls
className="h-[400px] w-full mt-3 border border-white"
onClick={() => {
openModal(communityImages, index);
pauseVideo(); // ✅ 此时 videoEl 已是最新的有效引用
}}
>
<source
src={data?.mediaUrls[0]?.mediaUrl}
type="video/mp4"
/>
</video>? 关键注意事项：
-
ref={setVideoEl}是回调 ref 写法，React 会在元素挂载/卸载时自动调用setVideoEl(videoNode)，比useRef更可控； - 若视频可能被多次挂载（如列表中多个
<video></video>），需确保每个setVideoEl对应唯一实例（可通过索引或 key 隔离）； - 进阶建议：在模态框关闭时调用
videoEl?.play()恢复播放（需用户交互授权）； - 若使用自定义 Hook 封装，可进一步提取
useVideoController逻辑，提升复用性。
通过这一重构，你将彻底规避因引用陈旧导致的暂停失效问题，让模态框与视频行为严格解耦、响应准确。
