code deep_

Table of Contents

1、概述

有许多原生的媒体空间，都支持 开始、暂停、重置、获取进度等控制播放的状态方法，例如视频、音频等。

我们可以在组件内部实现这些控制方法，然后通过 ref 传递给父组件，父组件就可以通过 ref 调用这些方法来控制媒体播放

在下面的案例中，我模拟了一个支持这些方法的定时器播放器。并结合 ref 与 useImperativeHandle 进行封装，大家直接看代码学习

需要注意：本案例抛弃了 forwardRef 的使用，直接使用 useImperativeHandle 来实现 ref 的传递

预览
一个自定义的计时器
00:00
index.tsx
chronograph.tsx
01
import { useRef } from 'react';

02
import { Chronograph, ChronographHandle } from './chronograph';

03


04
export default function Demo01() {

05
  const chronoRef = useRef<ChronographHandle>(null);

06


07
  function __clickHandler(method: string) {

08
    const methodName = method.toLowerCase() as keyof ChronographHandle;

09
    chronoRef.current?.[methodName]();

10
  }

11


12
  return (

13
    <div className="p-4">

14
      <div className="max-w-2xl mx-auto space-y-2">

15
        <Chronograph ref={chronoRef} label="一个自定义的计时器" />

16
        <div className="grid grid-cols-3 gap-px">

17
          {(['START', 'STOP', 'RESET']).map((label) => (

18
            <button

19
              key={label}

20
              onClick={() => __clickHandler(label)}

21
              className="button"

22
            >{label}</button>

23
          ))}

24
        </div>

25
      </div>

26
    </div>

27
  );

28
}
上一篇
useImperativeHandle
下一篇
实践：Lottie 动画的控制与运用
专栏首页
到顶
专栏目录