javascript - Typescript 为第三方自定义组件（react-player）输入参考

Question

描述

我正在努力添加useRef附加在此播放器组件上的类型注释：react-player以根据文档演示源代码访问seekTo实例方法。我似乎无法让类型工作 - 我对打字稿有点陌生，可能会遇到这个错误，所以任何指针都会有所帮助！我查看了 react-player index.d.ts 并且可以看到那里列出了该函数，只需要知道我应该如何编写它。

预期行为

可以访问播放器的实例方法。

错误

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

重现步骤

我制作了一个小的 codeSandbox - 基本上试图模仿演示源来添加 ref 以在范围类型输入上使用该seekTo方法。onMouseUp

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

谢谢！

Answer 1

关于您的代码的一些事情：

1. 要访问 ref，请使用 ref.current 而不是 ref..
2. ref 可以为空，所以你必须检查它是否为空
3. 使用事件的 currentTarget 来访问值而不是目标。

onMouseUp={(e) => {
            if (player.current) {
              player.current.seekTo(parseFloat(e.currentTarget.value));
            }
          }}

Answer 2

我也一直在为此苦苦挣扎。

import { BaseReactPlayerProps } from 'react-player/base';
const MyPlayer = ({playerRef : BaseReactPlayerProps}) => {
// component code 
if (playerRef) {
  currentPlayerRef.seekTo(seconds, 'fraction');
}

}

Answer 3

我正在使用带有 React 的 TS 的项目。通过声明，我能够使一切正常工作：

const player = useRef<ReactPlayer>(null);

然后在我的：

    <ReactPlayer ref={player} />

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

player?.current?.seekTo(seconds);

无需使用：

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