javascript - 如何在 React App 中包含外部 JavaScript?
问题描述
我是 Reactjs 的新手。最近我使用 reactjs 创建了一个简单的打字应用程序。事实上,我从我之前的 PHP 项目中构建了那个应用程序。我需要将我的自定义 javascript 文件包含到我的 reactjs 应用程序中。
我的 Home.js 文件是
import React from 'react';
import {Link} from 'react-router-dom';
function Home() {
return (
<form name="post" method="POST">
<div class="form-group form-row">
<div class="col-sm-2 col-md-12">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio1" class="custom-control-input" onclick="toggleKBMode(event,this)"/>
<label class="custom-control-label" for="customRadio4">One<br/></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio2"class="custom-control-input" onclick="toggleKBMode(event,this)"/>
<label class="custom-control-label" for="customRadio1">Two<br/></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio3"class="custom-control-input" onclick="toggleKBMode(event,this)"/>
<label class="custom-control-label" for="customRadio1">Three<br/></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio4"class="custom-control-input" onclick="toggleKBMode(event,this)"/>
<label class="custom-control-label" for="customRadio1">Four<br/></label>
</div>
</div>
</div>
<div class="form-group"><textarea name="comment" class="form-control" id="TextArea" onkeydown="toggleKBMode(event)" onkeypress="javascript:convertThis(event)" autofocus=""></textarea></div>
<div class="col-md-9">
<button type="submit" class="btn btn-outline-primary" onclick="DFile()" aria-label="Download"><b>Download</b></button>
<button type="submit" class="btn btn-secondary" id="Tools" onclick="copyToClipboard()"><b>Clip</b></button>
</div>
</form>
);
}
export default Home;
我的 App.js 文件是
import Home from './system/pages/Home';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
function App() {
let script = document.createElement("script");
script.src = "/include/js/customTextAreafunction.js";
//You might have to add other attributes here
script.async = true; //So the script load does not block anything
document.body.appendChild(script);
return (
<Router>
<div className="container">
<Switch>
<Router exact path="/">
<Home/>
</Router>
</Switch>
</div>
</Router>
);
}
export default App;
但我想将此自定义 javascript 文件添加到我的项目中,这有助于 Textarea 的运行。
我想包含 reactjs App 的自定义 js 文件
<script src="/include/js/customTextAreafunction.js"></script>
所以请帮我解决这个问题。提前致谢。
App.js 最近被编辑但没有工作。请帮助我的项目。
解决方案
如果你想编辑你的 index.html,你可以在那里复制/粘贴你的脚本标签。
或者您可以等待 App.js 中的组件挂载并获取它:
let script = document.createElement("script");
script.src = "/include/js/customTextAreafunction.js";
//You might have to add other attributes here
script.async = true; //So the script load does not block anything
document.body.appendChild(script);
推荐阅读
- postgresql - 使用 make 为 Postgresql 创建 pg_strom 扩展时出错:“make: *** No targets specified and no makefile found. 停止。”
- angular - 如何在角度路由器中关闭自动斜线添加内部 URL
- android - 当尺寸变小时,矢量可绘制对象像素化
- dynamics-crm - 空白 createdon、createdby、modifiedon、modifiedby
- python - Pandas Dataframe 查找和子字符串
- c# - 无法将 URL 解码为正确的值
- python - 如何在文本中查找日期
- python - 找不到元素
- node.js - 将 nodemon 与 docker 和 docker-compose 一起使用
- javascript - 关于 JS 和列表分布的新手问题