React Slick 轮播集成视频：踩坑与无障碍优化实战

在电商详情页中，将产品视频与图片轮播结合是提升转化率的关键功能。最近在开发中，我遇到了一个看似简单但细节满满的需求：在 React Slick 轮播中集成视频，要求切换流畅、自动暂停、且支持全屏预览。

本文将分享在实现过程中遇到的“坑”以及最终的解决方案，特别是关于 React Ref 的时机和无障碍访问（Accessibility）的一些深层思考。

🎯 需求概览

• 首图视频：如果有视频，轮播的第一张显示视频，后续显示图片。
• 自动暂停：当用户从视频切换到图片时，视频必须自动暂停。
• 默认音量：视频加载时默认音量设为 50%。
• 全屏预览：点击图片或视频可全屏查看，且预览模式下也能播放视频。
• 无缝体验：预览模式下禁用轮播的键盘导航，防止 Tab 键意外切换。

🕳️ 踩坑之路

坑一：useEffect 设置音量失效

起初，我尝试用最常见的 useEffect 来设置音量：

// ❌ 错误示范
const videoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {
  if (videoRef.current) {
    videoRef.current.volume = 0.5; // 经常不生效！
  }
}, []);

问题原因： React Slick 为了性能优化，可能会延迟渲染 Slide，或者在克隆 Slide 时重新创建 DOM。当 useEffect 执行时（组件挂载后），video 元素可能还没真正出现在 DOM 中，或者 ref 还没被赋值。而且 ref 的变化不会触发组件重渲染，导致 useEffect 不会再次执行。

坑二：预览模式下的“幽灵”切换

当实现了全屏预览模式后，发现一个诡异的 Bug：在全屏预览时按下 Tab 键，背景里的轮播竟然切换了！

问题原因： 视频元素 <video> 天生是可聚焦（focusable）的。当用户按 Tab 键时，焦点移动到了视频控件上。由于轮播组件监听了焦点变化以支持无障碍访问，这意外触发了轮播的切换逻辑。

🚀 终极解决方案

1. Callback Ref：精准捕捉 DOM 挂载

为了解决音量设置不稳定的问题，我放弃了 useEffect，改用 Callback Ref。这是 React 中处理动态 DOM 元素的“核武器”。

// ✅ 正确示范
<video
  ref={(el) => {
    // 1. 更新 useRef，以便其他地方使用
    if (videoRef) (videoRef as any).current = el;
    
    // 2. 元素挂载瞬间立即执行！
    if (el) {
      el.volume = 0.5;
      // 甚至可以添加事件监听
      // el.addEventListener('loadedmetadata', ...)
    }
  }}
  src={videoUrl}
/>

原理： Callback Ref 不依赖 React 的渲染周期。每当 React 创建或销毁 DOM 节点时，它保证会调用这个函数。这让我们能在 <video> 标签诞生的那一毫秒，精准地控制它。

2. 智能的暂停逻辑

为了确保切换时视频暂停，我在 afterChange 回调中使用了双重保障：

afterChange: (current: number) => {
  // 如果当前不是第一张（视频页），且视频存在
  if (hasVideo && current !== 0) {
    // 1. 尝试通过 ref 暂停
    if (videoRef.current) videoRef.current.pause();
    
    // 2. 【兜底方案】DOM 查询暂停所有视频
    // 解决 React Slick 克隆 Slide 导致的 ref 指向不明问题
    document.querySelectorAll('video').forEach(v => v.pause());
  }
}

3. 驯服 Tab 键：动态 tabIndex

为了解决预览模式下的焦点问题，我们需要让视频在预览时“不可见”（对键盘而言）。

<video
  // 预览模式下设为 -1，使其不可聚焦
  // 正常模式下设为 0，保持可访问性
  tabIndex={previewMode ? -1 : 0} 
  // ...
/>

同时，在 React Slick 配置中彻底禁用预览模式下的交互：

const sliderSettings = {
  // ...
  accessibility: !previewMode, // 禁用键盘导航
  swipe: !previewMode,        // 禁用滑动
  draggable: !previewMode,    // 禁用拖拽
};

📝 总结

在处理 React 复杂组件交互时，我们学到了：

• 不要过度依赖 useEffect 处理 DOM：对于条件渲染或动态创建的元素，Callback Ref 是更可靠的选择。
• 关注无障碍属性：tabIndex 不仅关乎无障碍访问，也能解决意想不到的焦点交互 Bug。
• 防御性编程：在处理第三方库（如 React Slick）时，多一层兜底逻辑（如 DOM 查询暂停）往往能救命。

希望这篇文章能帮你避开这些坑，打造丝般顺滑的轮播体验！