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

【问题标题】：Typescript typing a reference for third party custom components (react-player)Typescript 为第三方自定义组件（react-player）输入参考
【发布时间】：2020-08-14 15:02:42
【问题描述】：

说明

我正在努力添加附加在此播放器组件上的useRef 的类型注释：react-player 以根据documentation demo source code 访问seekTo 实例方法。我似乎无法让类型工作 - 我对打字稿有点陌生，可能会遇到这个错误，所以任何指针都会有所帮助！我查看了 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

谢谢！

【问题讨论】：

标签： javascript reactjs typescript react-player

【解决方案1】：

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

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

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

【讨论】：

天哪，这一直很烦人，多么令人讨厌的修复 - 我最初尝试 player.current.seekTo 知道这就是您访问 refs 的方式，当我收到空错误时尝试了可选链接 @987654322 @ 并且可以理解地不起作用，因此最终将其删除并以某种方式回溯到上一个问题并将其与演示源 DUMB 匹配。谢谢伙计！.... current/currentTarget 总是把我抓出来，那真是可耻
不要自暴自弃。我也经常想念那个:)

【解决方案2】：

我也一直在努力解决这个问题。

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

}

【讨论】：