如何在 React App 中包含外部 JavaScript？

Question

我是 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 最近被编辑但没有工作。 请帮助我的项目。

Answer 1

如果你想编辑你的 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);