在反应中导入jQuery文件

Question

我有一个用React编写的页面。现在，我想在用Jquery编写的页面末尾插入一个函数。那怎么可能？

我原本以为我可以通过导入/导出来做到这一点，但是不幸的是，到目前为止，它还没有奏效。

这是我的React和JQuery代码的一部分。我如何将game.js的内容插入index.js？

这是我的react代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Switch, Route } from "react-router-dom";
import ProgressReport from "./progressReport";
import Spinner from "./Spinner";
import Card from "./card";
import "react-vertical-timeline-component/style.min.css";
import "./styles.css";

class App extends Component {
  state = {
    renderReport: false
  };
  render() {
    let spinner;
    setTimeout(
      function() {
        this.setState({ renderReport: true });
      }.bind(this),
      2000
    );
    if (this.state.renderReport) {
      spinner = <Card />;
    } else {
      spinner = <Spinner />;
    }
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" component={ProgressReport} />
          <Route path="/spinner" component={() => spinner} />
        </Switch>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

这是我的game.js（jquery）：

document.getElementById("highscore").innerHTML =
  parseFloat(localStorage.getItem("highScore")) || "Jetzt Highscore Festlegen!"; // Nimmt den Highscore-Wert aus dem Local-Storage und fügt ihn ein.
document.getElementById("highscore2").innerHTML =
  parseFloat(localStorage.getItem("highScore2")) ||
  "Jetzt Highscore Festlegen!";
document.getElementById("highscore3").innerHTML =
  parseFloat(localStorage.getItem("highScore3")) ||
  "Jetzt Highscore Festlegen!";
let klick = 0;
document.getElementById("anzeige").innerHTML = klick; //setzt den wert für die Klick anzeige auf den wert der Variable klick

display = document.querySelector("#time");

$(document).ready(function() {
  //lässt einen erst spielen, wenn der DOM geladen hat.

  $("#start").click(function() {
    //clickfunktion beim starten des Spiels.

    $("#zeitinfo").fadeToggle(); //Faded die gewollten anzeigen aus oder ein, jeh nachdem (dafür Toggle)
    $("#start").fadeToggle();
    $("#welcome").fadeToggle();
    $("#zeitauswahl").fadeToggle();

    $("#time").fadeToggle(900); //Timer kommt
    $("#clicker").animate({
      //kleine animation für den clicker
      height: "toggle" //inverse aktion...keine height --> klappt auf // aufgeklappt  ---> macht height weg
    });
    var d = $("#zeitauswahl option:selected").val(); //referenziert auf zeitauswahl und die ausgewählte option

    var dauer = parseInt(d); //verwandelt Dauer in einen Int

    startTimer(dauer); //übergibt die variable dauer, und die Funktion wird gestartet.
  });

  function startTimer(dauer) {
    //definiert die timerfunktion

    let timer = parseInt(dauer); //setzt die Variable Timer auf den auf einen Integer gesetzten Wert dauer
    runTimer(); //startet runtimer
    zeit = setInterval(runTimer, 1000); //Gibt den Zeitintervall für die Funktion an. Hier eine Sekunde (1000Millisekunden)
    function runTimer() {
      //definiert runTimer-Funktion
      display.textContent = parseInt(timer); // zeigt sekunden-variable

      --timer; //setzt den timer immer einen herab

      if (timer < 0.0) {
        //wenn timer auf 0 steht wird das folgende ausgeführt

        console.log(timer); //debug info
        $("#start").fadeToggle(); //faded alles ein wenn das speil vorbei ist
        $("#zeitinfo").fadeToggle();
        $("#welcome").fadeToggle();
        $("#zeitauswahl").fadeToggle();
        $("#time").fadeToggle();
        $("#clicker").fadeToggle();
        $("#clicker").css("margin-top", "10%");
        $("#clicker").css("margin-left", "50%");

        if (dauer == 5) {
          var sec5 = highScore1(klick); //wenn die dauer 5 ist, dann wird die function highscore 1 ausgeführt und in einer variable gespeichert.

          dauer = 0;
        }

        if (dauer == 10) {
          var sec10 = highScore2(klick);

          dauer = 0;
        }

        if (dauer == 15) {
          var sec15 = highScore3(klick);

          dauer = 0;
        }

        console.log(timer); //debug-info

        clearInterval(zeit); //cleart den intervall, so dass die funktion nicht mehr abläuft.

        klick = 0; //setzt den klicker auf 0, damit nicht einfach weitergezählt wird.
      }
    }
  }
});