Javascript 如何在react组件中包含外部js文件_Javascript_Html_Reactjs_React Hooks_React Helmet

Javascript 如何在react组件中包含外部js文件

javascript html reactjs

Javascript 如何在react组件中包含外部js文件,javascript,html,reactjs,react-hooks,react-helmet,Javascript,Html,Reactjs,React Hooks,React Helmet,我正在尝试在我的react组件中插入一些外部js文件。我尝试将它们包含在脚本标记中的一个简单html文件中，效果很好，但如何在react组件中实现。如何在html页面中包含它们：- <script src="js/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit(&q

我正在尝试在我的react组件中插入一些外部js文件。我尝试将它们包含在脚本标记中的一个简单html文件中，效果很好，但如何在react组件中实现。如何在html页面中包含它们：-

<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/eclipse");
    editor.session.setMode("ace/mode/c_cpp");
</script>
<body>
   <div id="editor">
       //text to display
   </div>
</body>


变量编辑器=ace.edit（“编辑器”）；
setTheme（“ace/theme/eclipse”）；
editor.session.setMode（“ace/mode/c_-cpp”）；
//要显示的文本

id=“editor”

是在包含在脚本标记中的js文件中定义的，所以主要问题是如何将其包含在react组件中。我已经看到一些使用customReactHooks的结果，但不知道如何实现它。任何想法

const loadScript=（回调）=>{
const script=document.createElement（'script'）；
script.src='path'；//脚本的路径
script.id='some id'；
document.body.appendChild（脚本）；
script.onload=（）=>{
if（callback）callback（）；
};
}

在react组件的useEffect或componentDidMount中调用此函数

您可以使用名为react script tag的npm库

您可以使用document.createElement创建新的脚本标记。并在您详细描述的某个组件挂载时将其附加到html中@TheAlpha93这是否回答了您的问题？如何包含第二个脚本标记的工作。简单地将它们包含在上述函数中是不起作用的@alpha93这个答案只是很小的帮助。你可以在你的答案中添加一个解释或一个小例子来提高它的质量。如果你做得足够好，你可能会得到一些选票。请查看并编辑您的答案。