Javascript 如何使用React Ref调用video.play（）？

如何使用ref触发video.play（）

目前我收到一个错误：

preview.bundle.js:261916未捕获类型错误：\u this2.videoRef.play不是一个函数

这是我的组件：

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;

从“React”导入React；
从“样式化组件”导入样式化；
从“反应航路点”导入航路点；
const Container=styled.div`
位置：相对位置；
填充顶部：64px；
`;
const StyledVideo=styled.video`
宽度：500px；
`;
类Video.Component{
handleRef=（视频）=>{
this.videoRef=视频；
};
render（）{
返回(
{
console.log（this.videoRef.props.children）；
这个.videoRef.play（）；
}}
/>
);
}
}
导出默认视频；

谢谢

删除

console.log（this.videoRef.props.children）

组件的

oneter

回调中选择code>，您应该可以找到预期的视频播放

---

有关工作示例，请参见此链接。

结果表明，我使用的是样式化组件vs，它需要innerRef