視頻反應在src更新後videoJS不加載

Question

我使用視頻反應（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(); 

這沒有奏效。我嘗試重命名裁判，但仍然沒有。該div顯示，但不是玩家。

編輯：剛剛發現這個在Player.js組件，但無法弄清楚如何實現它：Player.js component source code

Answer 1

this.refs不存在的原因是因爲你的代碼只需觸摸DOM，而不是直接使用反應生命週期。請按以下方式修改代碼

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() 
    } 
}