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

Question

描述

我正在努力添加

附加在此播放器组件上：

react-player

若要访问

实例方法，根据

文档演示源代码

..。我似乎不能让类型工作-我是一个打字新手，可能在这方面做错了，所以任何指示将是有帮助的！我已经查看了react-player index.d.ts，可以看到函数在那里列出，只需要知道我应该如何编写它。

预期行为

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

错误

复制步骤

我做了一个小的codeSandbox -基本上是模仿演示源码来添加一个引用来利用

方法

在范围类型输入上。

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

谢谢！

Answer 1

关于你的代码有几件事：

要访问ref，请使用ref.current而不是ref。

ref可以为null，因此您必须检查它是否为null

使用事件的currentTarget而不是target来访问值。

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');
}

}