如何使用 React Ref 调用 video.play()？

Posted 2023-05-08

【中文标题】如何使用 React Ref 调用 video.play()？

【英文标题】：How to use a React Ref to call video.play()?

【发布时间】：2019-04-09 05:44:40

【问题描述】：

如何使用 ref 来触发 video.play() ？

目前我收到一个错误：preview.bundle.js:261916 Uncaught TypeError: _this2.videoRef.play is not a function

这是我的组件：

import React from 'react';
import styled from 'styled-components';
import Waypoint from 'react-waypoint';

const Container = styled.div`
  position: relative;
  padding-top: 64px;
`;

const StyledVideo = styled.video`
  width: 500px;
`;


class Video extends React.Component 
  handleRef = (video) => 
    this.videoRef = video;
  ;

  render() 
    return (
      <Container>
        <Waypoint
          onEnter=() => 
            console.log(this.videoRef.props.children);
            this.videoRef.play();
          
        />
        <StyledVideo
          ref=this.handleRef
          muted
          playsinline
          poster="https://luna1.co/88dbde.png"
          loop
          src="https://d1gwm4cf8hecp4.cloudfront.net/videos/homepage/v4/Boards.mp4"
        >
          <track kind="captions" />
        </StyledVideo>

      </Container>
    );
  


export default Video;

谢谢

【参考方案1】：

从<Waypoint /> 组件的onEnter 回调中删除console.log(this.videoRef.props.children);，您应该会发现视频按预期播放。

有关工作示例，请参阅此 https://codesandbox.io/s/nwqwopj1p0 链接。

【讨论】：

原来我使用的是样式化组件 vs 需要 innerRef