私はcomponentDidMount（）およびcomponentDidUpdate（）からbrightcoveプレーヤーをレンダリングしていますが、DOMは更新されていますがビデオは初期化されていません。 React + Redux

Question

私はbrightcoveオブジェクトを持っていて、それをcomponentDiMount（）とcomponentDidUpdate（）関数の内側のdomに追加しています。

問題は、BrightcoveオブジェクトがDOMでレンダリングされていますが、プレーヤがロードされていないことです。以下は自分のコードです。私はオブジェクトをDOMにレンダリングするためにアンダースコアテンプレートを使用しています。

componentDidMount() { 

     let script = document.createElement("script"); 
     script.type = "text/javascript" 
     script.innerHTML = brightcove.createExperiences(); 
     document.body.appendChild(script); 

     let brightCover = this.chooseCurrentVideoCreateUrl() 
     if(!_.isUndefined(brightCover[0])) { 
      var params = { 
       brightCover: brightCover[0] 
      } 
     let videoPlayer = '<object id="<%="myExperience"+brightCover%>" className="BrightcoveExperience">'+ 
          '<param name="bgcolor" value="#FFFFFF" />'+ 
          '<param name="width" value="100%" />'+ 
          '<param name="height" value="100%" />'+ 
          '<param name="playerID" value="720309809001" />'+ 
          '<param name="playerKey" value="AQ~,AAAAp4YWl7E,S6CN7FjhVAvtDOWxkCENYOdaZ_aPLFrM" />'+ 
          '<param name="isVid" value="true" />'+ 
          '<param name="dynamicStreaming" value="true" />'+ 
          '<param name="isUI" value="true" />'+ 
          '<param name="includeAPI" value="true" />'+ 
          '<param name="@videoPlayer" value="<%=brightCover%>" />'+ 
         '</object>'; 
     let videoTemplate = _.template(videoPlayer); 

     $(".bigVideo").append(videoTemplate(params)) 

    } 

    render() { 
     return (
      <div className="videosWrap"> 
       <div className="bigVideo"></div> 
      </div> 
     ) 
    } 

オブジェクトはDOMにレンダリングされていますが、プレーヤはロードされていません。

Answer 1

この問題は修正されました。 私はちょうど私たちは、DOMが新しいBrightcoveのオブジェクトに更新され、私もdangerouslySetInnerHTMLを使用してHTMLをレンダリングしているので、それが作成されますので、もう一度このスクリプトを追加する必要が新しく追加されたためのIDを反応させcomponentDidUpdate()

let script = document.createElement("script"); 
    script.type = "text/javascript" 
    script.innerHTML = brightcove.createExperiences(); 
    document.body.appendChild(script); 

にコードの下に描画されています要素。