Reactjs React JS-高阶组件，装载时返回函数

我正在尝试使用RET-html5video HoC示例为HTML5视频播放器制作自定义控件：

import videoConnect from 'react-html5video';

const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
    <div>
        <video {...restProps}>
            { children }
        </video>
        <p>
            Here are the video properties for the above HTML5 video:
            { JSON.stringify(video) }
        </p>
        <a href="#" onClick={(e) => {
            e.preventDefault();
            // You can do what you like with the HTMLMediaElement DOM element also.
            videoEl.pause();
        }}>
            Pause video
        </a>
    </div>
);

export default videoConnect(MyVideoPlayer)

从“react-html5video”导入视频连接；
const MyVideoPlayer=（{video，videoEl，children，…restProps}）=>(
{儿童}

以下是上述HTML5视频的视频属性：
{JSON.stringify（视频）}

);
导出默认videoConnect（MyVideoPlayer）

通过“onClick”向按钮添加功能似乎相当简单，如下所示：

  <button className={styles.rewindBTN} onClick ={() => {
        videoEl.currentTime -= 5;
        }
      } hidden={false} ></button>

      <button id="playPauseBTN" className={styles.playPauseBTN} onClick={() => {
        if (videoEl.paused) {
            videoEl.play()
            document.getElementById('playPauseBTN').style.backgroundImage = "url('./components/HoC/img/pause.png')";
          } else {
            videoEl.pause()
            document.getElementById('playPauseBTN').style.backgroundImage = "url('./components/HoC/img/play.png')";
            }
           }
         } hidden={false}></button>

      <button className={styles.replayBTN} onClick ={() => {
        videoEl.currentTime = 0;
        videoEl.play()
        }
      } hidden={true} ></button>

{
videoEl.currentTime-=5；
}
}隐藏={false}>
{
如果（视频暂停）{
视频播放
document.getElementById（'playPauseBTN'）.style.backgroundImage=“url（'./components/HoC/img/pause.png'）”；
}否则{
暂停
document.getElementById（'playPauseBTN'）.style.backgroundImage=“url（'./components/HoC/img/play.png'）”；
}
}
}隐藏={false}>
{
videoEl.currentTime=0；
视频播放
}
}隐藏={true}>

我可以像这样访问道具（即“当前时间”和“持续时间”）：

const updateTime = ( videoEl, currentTime ) => {
    let curMins = Math.floor(videoEl.currentTime / 60);
    let curSecs = Math.floor(videoEl.currentTime - curMins * 60);
    let durMins = Math.floor(videoEl.duration / 60);
    let durSecs = Math.floor(videoEl.duration - durMins * 60);
    if(curSecs < 10){ curSecs = "0"+curSecs; }
    if(durSecs < 10){ durSecs = "0"+durSecs; }
    if(curMins < 10){ curMins = curMins; }
    if(durMins < 10){ durMins = durMins; }
    document.getElementById('curTimeText').innerHTML = curMins+":"+curSecs;
    document.getElementById('durTimeText').innerHTML = durMins+":"+durSecs;
}

const updateTime=（videoEl，currentTime）=>{
让curMins=数学楼层（videoEl.currentTime/60）；
让curSecs=数学楼层（videoEl.currentTime-curMins*60）；
让durMins=数学楼层（videoEl.duration/60）；
设durSecs=数学楼层（videoEl.duration-durMins*60）；
如果（curSecs<10）{curSecs=“0”+curSecs；}
如果（durSecs<10）{durSecs=“0”+durSecs；}
如果（curMins<10）{curMins=curMins；}
如果（durMins<10）{durMins=durMins；}
document.getElementById（'curTimeText'）。innerHTML=curMins+“：”+curSecs；
document.getElementById（'durTimeText'）。innerHTML=durMins+“：”+durSecs；
}

但我不知道如何在组件挂载时启动“updateTime（）”函数，并在视频播放时更新时间。该函数返回currentTime/duration…我在“playPauseBTN onClick”事件中调用了该函数，每次单击playPauseBTN时，信息都会更新

如何让函数在组件安装后立即显示持续时间，并在视频播放时更新currentTime

我不熟悉高阶组件的概念，所以如果这是我的一个明显错误，请原谅我

非常感谢您的反馈

*更新代码*（将Video01Player组件包装在一个类中）

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“道具类型”导入道具类型；
从'react Motion'导入{Motion，spring}；
从“样式化组件”导入样式化；
从“react-html5video”导入videoConnect；
从“../html5Video.css”导入样式；
从“../customNav.scss”导入customNav；
从“../Video01Labels”导入Video01Labels；
从“../Video01字幕”导入Video01字幕；
const overlycontainer=document.querySelector（'.overlycontainer'）；
const progressBarFill=document.querySelector（'.progressBarFill'）；
const playPauseBTN=document.querySelector（'.playPauseBTN'）；
const curTimeText=document.querySelector（“.curTimeText”）；
const durTimeText=document.querySelector（“.durTimeText”）；
const videoEl=document.getElementById（'vid01'）；
const src=“./components/HoC/video/video01.mp4”；
类Video01Player扩展组件{
建造师（道具）{
超级（道具）；
this.updateTime=this.updateTime.bind（this）；
this.updateProgress=this.updateProgress.bind（this）；
}
componentDidMount（）{
此.updateTime（Video01Player，videoEl）
此.updateProgress（Video01Player，videoEl）
}
组件将卸载（）{
}
组件将接收道具（）{
此.updateTime（Video01Player，videoEl）
此.updateProgress（Video01Player，videoEl）
}
//更新视频时间
updateProgress（Video01Player、videoEl、currentTime、duration）{
//计算当前进度
var值=（100/视频EL.duration）*视频EL.currentTime；
//更新滑块值
document.getElementById（'progressBarFill'）。style.width=value+'%'；
}
更新时间（Video01Player、videoEl、currentTime、duration）{
让curMins=数学楼层（videoEl.currentTime/60）；
让curSecs=数学楼层（videoEl.currentTime-curMins*60）；
让durMins=数学楼层（videoEl.duration/60）；
设durSecs=数学楼层（videoEl.duration-durMins*60）；
如果（curSecs<10）{curSecs=“0”+curSecs；}
如果（durSecs<10）{durSecs=“0”+durSecs；}
如果（curMins<10）{curMins=curMins；}
如果（durMins<10）{durMins=durMins；}
document.getElementById（'curTimeText'）。innerHTML=curMins+“：”+curSecs；
document.getElementById（'durTimeText'）。innerHTML=durMins+“：”+durSecs；
}
render（）{
const{Video01Player，videoEl，children，paused，duration，currentTime，…restProps}=this.props
返回(
{儿童}
{
videoEl.currentTime-=5；
}
}隐藏={false}>
{
如果（视频暂停）{
视频播放
document.getElementById（'playPauseBTN'）.style.backgroundImage=“url（'./components/HoC/img/pause.png'）”；
}否则{
暂停
document.getElementById（'playPauseBTN'）.style.backgroundImage=“url（'./components/HoC/img/play.png'）”；
}
}
}隐藏={false}>
{
videoEl.currentTime=0；
视频播放
}
}隐藏={true}>
{
videoEl.currentTime+=5；
}
}>
00:00 / 00:00
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';

import { Motion, spring } from 'react-motion';
import styled from 'styled-components';

import videoConnect from 'react-html5video';

import styles from '../html5Video.css';
import customNav from '../customNav.scss';

import Video01Labels from '../Video01Labels';
import Video01Captions from '../Video01Captions';

const overlayContainer = document.querySelector('.overlayContainer');
const progressBarFill = document.querySelector('.progressBarFill');
const playPauseBTN = document.querySelector('.playPauseBTN');
const curTimeText = document.querySelector(".curTimeText");
const durTimeText = document.querySelector(".durTimeText");
const videoEl  = document.getElementById('vid01');
const src = "./components/HoC/video/video01.mp4";

class Video01Player extends Component {
  constructor(props) {
    super(props);

    this.updateTime = this.updateTime.bind(this);
    this.updateProgress = this.updateProgress.bind(this);

  }

  componentDidMount() {
     this.updateTime(Video01Player, videoEl)
     this.updateProgress(Video01Player, videoEl)
  }

  componentWillUnmount() {

  }

  componentWillReceiveProps() {
     this.updateTime(Video01Player, videoEl)
     this.updateProgress(Video01Player, videoEl)
  }

  // Update Video Time
    updateProgress( Video01Player, videoEl, currentTime, duration ) {
     // Calculate current progress
     var value = (100 / videoEl.duration) * videoEl.currentTime;

     // Update the slider value
     document.getElementById('progressBarFill').style.width = value + '%';
    }

    updateTime( Video01Player, videoEl, currentTime, duration ) {
        let curMins = Math.floor(videoEl.currentTime / 60);
        let curSecs = Math.floor(videoEl.currentTime - curMins * 60);
        let durMins = Math.floor(videoEl.duration / 60);
        let durSecs = Math.floor(videoEl.duration - durMins * 60);
        if(curSecs < 10){ curSecs = "0"+curSecs; }
        if(durSecs < 10){ durSecs = "0"+durSecs; }
        if(curMins < 10){ curMins = curMins; }
        if(durMins < 10){ durMins = durMins; }
        document.getElementById('curTimeText').innerHTML = curMins+":"+curSecs;
        document.getElementById('durTimeText').innerHTML = durMins+":"+durSecs;
    }


  render() {

    const { Video01Player, videoEl, children, paused, duration, currentTime, ...restProps } = this.props

    return (

      <div className={styles.videoContainer}>
          <video className={styles.videoWrapper} id="vid01" src={src} type="video/mp4" { ...restProps } >
              { children }
          </video>

        <div className={styles.videoControlsWrapper}>

          <button className={styles.rewindBTN} onClick ={() => {
            videoEl.currentTime -= 5;
            }
          } hidden={false} ></button>

          <button id="playPauseBTN" className={styles.playPauseBTN} onClick={( currentTime, duration ) => {
            if (videoEl.paused) {
                videoEl.play()
                document.getElementById('playPauseBTN').style.backgroundImage = "url('./components/HoC/img/pause.png')";
                } else {
                videoEl.pause()
                document.getElementById('playPauseBTN').style.backgroundImage = "url('./components/HoC/img/play.png')";
                }
               }
             } hidden={false}></button>

          <button className={styles.replayBTN} onClick ={() => {
            videoEl.currentTime = 0;
            videoEl.play()
            }
          } hidden={true} ></button>

          <div className={styles.progressBar}>
            <div id="progressBarFill" className={styles.progressBarFill}></div>
          </div>

          <button className={styles.forwardBTN} onClick={() => {
            videoEl.currentTime += 5;
            }
          }></button>

          <div className={styles.timeWrapper}>
            <span id="curTimeText" className={styles.curTimeText}>00:00</span> / <span id="durTimeText" className={styles.durTimeText}>00:00</span>
          </div>

        </div>

        <div className={styles.overlayContainer} data-tid="container">
          <Video01Labels />
          <Video01Captions />
        </div>

      </div>

    );
  }
}

export default videoConnect(Video01Player);