Как добавить <script> тэг в div id с реакцией

Question

Я попытался добавить тэг в реакцию, но 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 сценария и т.д. Ваш код будет гораздо более аккуратно, и это может помочь с вашим вопрос.