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

Question

I am new to Reactjs. Recently I created a simple typing app using reactjs. In fact, I built that App from my previous PHP project. I need to include my custom javascript file to my reactjs app.

My Home.js file is

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;

My App.js file is

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;

But I want to add this custom javascript file into my project, which is helping for Textarea functioning.

Custom js file I want to include reactjs App

<script src="/include/js/customTextAreafunction.js"></script>

So kindly please help me to fix this. Thanks in advance.

App.js is edited recently but didn't work. Kindly please help my project.

Answer 1

If you want to edit your index.html, you can copy/paste your script tags there.

Or you can wait for component mount in App.js and fetch it:

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);