React JS - 更高阶组件，挂载

Question

我正在尝试使用reat-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)

通过＆＃34; onClick＆＃34;向按钮添加功能似乎相当简单，如下图所示：

  <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>

我可以像这样访问道具（例如＆＃39; currentTime＆＃39;＆＃39; duration＆＃39;）：

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;
}

但我无法弄清楚如何解雇＆＃34; updateTime（）＆＃34;组件安装时的功能，并在视频播放时更新时间。该函数确实返回currentTime / duration ...我在＆＃34; playPauseBTN onClick＆＃34;内部调用了函数。每次单击playPauseBTN时都会更新事件和信息。

如果组件安装完成后如何让功能显示持续时间并在视频播放时更新currentTime？

我是高阶组件概念的新手，请原谅我，如果这是我的一个明显错误。

非常感谢您的反馈。

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

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);