Question

我尝试将标记添加到react中，但componentDidMount始终在render之前运行。如何将脚本添加到一起并一起运行。

＆＃xA;＆＃xA;

  componentDidMount（）{＆＃xA; function loadScript（）{＆＃xA; var script = document.createElement（'script'）;＆＃xA; script.type ='text / javascript';＆＃xA; 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：“发布/ Arctopia_Path_Monopoly_v1.1.1GL.mem”};';＆＃XA;的document.getElementById（ “播放”）的appendChild（脚本）;＆＃XA;＆＃XA; var script0 = document.createElement（'script'）;＆＃xA; script0.type ='text / javascript';＆＃xA; script0.src ='TemplateData / UnityProgress.js';＆＃xA;的document.getElementById（ “播放”）的appendChild（script0）;＆＃XA;＆＃XA; var script2 = document.createElement（'script'）;＆＃xA; script2.src ='Release / UnityLoader.js';＆＃xA;的document.getElementById（ “播放”）的appendChild（SCRIPT2）;＆＃XA; }＆＃XA; loadScript（）;＆＃XA; this.setState（{update：true}）＆＃xA; console.log（“插入脚本”）＆＃xA;}，＆＃xA;＆＃xA; render（）{＆＃xA; return（＆＃xA;＆lt; div id =“wrapperOthers”＆gt;＆＃xA;＆lt; div className =“container text-xs-center”id =“play”＆gt;＆＃xA;＆lt; h4＆gt; {this .data.colCourse.name}＆lt; / h4＆gt;＆＃xA;＆lt; canvas id =“canvas”oncontextmenu =“event.preventDefault（）”height =“600px”width =“960px”＆gt;＆lt; / canvas＆gt; ＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;）＆＃xA;}＆＃xA;

＆＃xA;

Answer 1

我建议将此脚本创建为单独的js文件并导入/要求它（因为您使用的是JSX我假设您使用的是ES6，所以我将在ES6中编写示例）。然后你只能保留this.setState({ update: true })并在条件{this.state.update？ importedScript：null}

整个代码可能如下所示：

/*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等。您的代码将更加整洁，它可以帮助解决您的问题。

如何使用reactjs将<script>标记添加到div id中

1 个答案: