<script>タグをreactjsのdiv idに追加するには

Question

反応にタグを追加しようとしましたが、render前に常にcomponentDidMountが実行されました。スクリプトを追加して一緒に実行するにはどうすればよいですか。

componentDidMount() { 
    function loadScript() { 
     var script= document.createElement('script'); 
     script.type= 'text/javascript'; 
     script.textContent = 'var Module = { TOTAL_MEMORY: 536870912, errorhandler: null, compatibilitycheck: null, dataUrl: "Release/Arctopia_Path_Monopoly_v1.1.1GL.data", codeUrl: "Release/Arctopia_Path_Monopoly_v1.1.1GL.js",memUrl: "Release/Arctopia_Path_Monopoly_v1.1.1GL.mem",};'; 
     document.getElementById("play").appendChild(script); 

     var script0= document.createElement('script'); 
     script0.type= 'text/javascript'; 
     script0.src= 'TemplateData/UnityProgress.js'; 
     document.getElementById("play").appendChild(script0); 

     var script2= document.createElement('script'); 
     script2.src= 'Release/UnityLoader.js'; 
     document.getElementById("play").appendChild(script2); 
    } 
    loadScript(); 
    this.setState({ update: true }) 
    console.log("insert script") 
}, 

render() { 
    return (
     <div id="wrapperOthers"> 
      <div className="container text-xs-center" id="play"> 
       <h4>{ this.data.colCourse.name }</h4> 
       <canvas id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>    
      </div> 
     </div> 
    ) 
} 

Answer 1

私は、別のjsファイルとしてこのスクリプトを作成するために、お勧めとインポート/（あなたがJSXを使用しているので、私はあなたがES6を使用していると仮定し、私はES6に例を書きます）、それを必要とします。それでは、this.setState({ update: true })だけを残して、条件付きでdivを追加してください{this.state.update？ importedScript：ヌル}

全体のコードは次のようになります。

/*At the very top of your file*/ 
import importedScript from '../path to the file' 

componentDidMount() { 
    this.setState({ update: true }) 
    console.log("insert script") 
}, 

render() { 
    return (
     <div id="wrapperOthers"> 
      <div className="container text-xs-center" id="play"> 
       { this.state.update ? importedScript: null } 
       <h4>{ this.data.colCourse.name }</h4> 
       <canvas id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>    
      </div> 
     </div> 
    ) 
} 

をあなたのコードがはるかに整頓され、それはあなたを支援することができます任意の子添付、スクリプトcreartionとなどを必要としません問題。