如何使用Typescript在React中定义<video>引用的类型?

我正在尝试使用 React.js 中的 ref 来控制视频的播放/暂停状态,我的代码可以工作,但是我正在尝试解决 tslint 错误:

function App() {
    const playVideo = (event:any) => {
        video.current.play()
    }
    const video = useRef(null)

    return (
        <div className="App">
            <video ref={video1} loop src={bike}/>
        </div>
    );
}

这会导致

TS2531: Object is possibly 'null'.

所以,我试图改变const video = useRef(null)
const video = useRef(new HTMLVideoElement())

我得到:
TypeError: Illegal constructor

我也试过:const video = useRef(HTMLVideoElement)
结果是:

TS2339: Property 'play' does not exist on type '{ new (): HTMLVideoElement; prototype: HTMLVideoElement; }'

回答

要为裁判的类型,你这样设置类型:useRef<HTMLVideoElement>()。然后,为了处理对象可能存在的事实null(因为在安装组件之前它为空或未定义!),您可以检查它是否存在。

const App = () => {
  const video = useRef<HTMLVideoElement>();
  const playVideo = (event: any) => {
    video.current && video.current.play();
  };

  return (
    <div className="App">
      <video ref={video} loop src={bike} />
    </div>
  );
};


以上是如何使用Typescript在React中定义&lt;video&gt;引用的类型?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>