0

我正在使用 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 组件源代码

4

1 回答 1

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()
    }
}
于 2017-07-20T01:19:09.210 回答