javascript - 更新 src 后，videoJS 中的视频 react 未加载

Question

我正在使用 Video-react ( https://video-react.js.org/components/player/ )，并且在页面上，它说我可以在更新其源代码后使用 this.refs.player.load() 。但我认为该方法不再受支持，因为它根本不起作用，而且我在使用 npm 下载的源代码中找不到它。

还有其他方法可以做到这一点或者有人找到解决方案吗？这是我的部分代码:

                var videoRow = document.createElement("div");
            videoRow.className = 'col-md-4';
            videoRow.setAttribute("id", "videoRows");
            //create the myPlayer div which will contain the Player. 
            var myPlayerDiv = document.createElement("div");
            myPlayerDiv.setAttribute("id", "myPlayer");
            //create my player with the information from the attributes.
            var videoPlayer = document.createElementNS('', 'Player');
            videoPlayer.setAttribute("src", data.val().videoURL);
            videoPlayer.setAttribute("ref","player");
            myPlayerDiv.appendChild(videoPlayer);
            videoRow.appendChild(myPlayerDiv);
            document.getElementById('videoList').appendChild(videoRow);
             this.refs.player.load();

这没有用。我尝试重命名 ref 但仍然没有任何结果。 div 出现，但播放器不出现。

编辑:刚刚在 Player.js 组件中找到了这个，但不知道如何实现它:Player.js component source code

Answer 1

this.refs 不存在的原因是你的代码只是直接接触 DOM，而不是使用 React 生命周期。请按以下方式修改代码

import React from 'react';
import { Player } from 'video-react';

class DisplayVideo extends React.Component {
    render () {
      const { data } = this.props
      return (
        <div className="col-md-4" id="videoRows">
          <div id="myPlayer">
            <Player src={data.val().videoURL} ref={(el) => this.player = el} />
          </div>
        </div>
      )
    }

    componentDidMount () {
      this.player.load()
    }
}