javascript - Typescript 输入第三方自定义组件的引用(react-player)

Question

描述

我正在努力添加 useRef 的类型注释附加在此播放器组件上:react-player访问 seekTo实例方法按照documentation demo source code 。我似乎无法让该类型工作 - 我对 typescript 有点陌生，可能会犯这个错误，所以任何指针都会有帮助!我查看了react-player index.d.ts，可以看到该函数列在那里，只需要知道我应该如何编写它。

预期行为

有权访问播放器的实例方法。

错误

Property 'seekTo' does not exist on type 'MutableRefObject<ReactPlayer | null>'.ts(2339)

重现步骤

我制作了一个小型 codeSandbox - 基本上是尝试模仿演示源来添加引用以利用 seekTo方法onMouseUp在范围类型输入上。

https://codesandbox.io/s/react-typescript-lqgvr?file=/src/index.tsx

谢谢!

Answer 1

我正在进行一个使用 TS 和 React 的项目。我能够通过声明使一切正常工作:

const player = useRef<ReactPlayer>(null);

然后在我的:

    <ReactPlayer ref={player} />

所以每当我需要使用像eekTo()这样的函数时，它看起来像:

player?.current?.seekTo(seconds);

无需使用:

import { BaseReactPlayerProps } from 'react-player/base';