如何在ReactJS中集成普通原始JavaScript？

如何解决如何在ReactJS中集成普通原始JavaScript？

我正在尝试将此3D gio visualization用于我的ReactJs应用程序。该代码使用普通JavaScript编写。我还找到了wrapper for React并尝试过，但是我无法选择所选国家（onCountryPicked()），因为它们显示在其demo上。这是我继续使用原始JavaScript实现而不是包装器的主要原因。但是，我发现香草JavaScript实现很难与我的ReactJs应用程序集成。

我四处寻找解决问题的方法，但是发现的资源并没有帮助我。以下是我参观过的地方。

helloworld.js

var container = document.getElementById("globalArea");

var controller = new GIO.Controller(container,{
  color: {...},brightness: {...},});

controller.onCountryPicked(callback);
controller.setinitCountry("FR");
controller.showOutOnly(false);
controller.showInOnly(false);

function callback(selectedCountry) {
  $("#countryArea").text(selectedCountry.name + " picked!");
  $("#infoBoard").fadeIn(300);
  setTimeout(function () {
    $("#infoBoard").fadeOut(1000);
  },3000);
}

axios
  .get("./test_data.json")
  .then(function (response) {
    controller.addData(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    controller.init();
  });

var d3Graphs = {
  tiltBtnInterval: -1,};

function showHud() {
  $("#hudButtons").show();
  $(".tiltBtn").on("mousedown touchstart",d3Graphs.tiltBtnClick);
  $(".tiltBtn").on("mouseup touchend touchcancel",d3Graphs.tiltBtnMouseup);
}

function tiltBtnClick() {
  var delta;
  if ($(this).hasClass("sideViewBtn")) {
    delta = 10;
  } else {
    delta = -10;
  }
  d3Graphs.doTilt(delta);
  d3Graphs.tiltBtnInterval = setInterval(d3Graphs.doTilt,50,delta);
}

function doTilt(delta) {
  tilt += delta * 0.01;
  tilt = constrain(tilt,Math.PI / 2);
  camera.position.y = 300 * Math.sin(-tilt);
  camera.position.z = 100 + 300 * Math.cos(-tilt);
  camera.lookAt(new THREE.Vector3(0,300));
  tiltTarget = undefined;
}

............

home.html

<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <script src="./lib/jquery-3.3.1.min.js"></script>
    <script src="./lib/three.min.js"></script>
    <script src="./lib/gio.min.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <link rel="stylesheet" href="helloworld.css" />
  </head>

  <body>
    <div class="b">
      <div id="infoBoard">
        <div id="countryArea"></div>
        <div id="explanation">Infos here</div>
      </div>
      <script src="helloworld.js"></script>
    </div>
  </body>
</html>

.......

Sample.js

export class Sample extends React.Component {
  componentDidMount() {
  
  }

  render() {
    return (
      <div className="App">
         ...
      </div>
    );
  }
}

解决方法

这是一个起点。我已经注释了React与Gio.js交互的部分。

const Globe = () => {
  // use a React ref whenever you need to directly target a DOM element
  // - this is required as an argument to the GIO.Controller constructor
  const ref = useRef(null);
  const [country,setCountry] = useState(initCountry);

  useEffect(() => {
    // useEffect with empty dependency array
    // - this will run once when the component mounts
    const controller = new GIO.Controller(ref.current,{
      control: {
        initCountry
      }
    });

    // import and add data here if you want the glowing lines
    controller.addData([]);

    controller.init();

    // here's the callback for when the user clicks a country
    // we can use the React setState hook inside the callback
    controller.onCountryPicked((country) => {
      setCountry(country.ISOCode);
    });
  },[]);

  return (
    <>
      <div>
        <strong>Selected country: {displayName.of(country)}</strong>
      </div>
      <div style={{ height: 500 }} ref={ref}></div>
    </>
  );
};

CodeSandbox demo

如果您将原始javascript文件放在与index.html相同的层次结构级别上，并进行正常链接，则您应该能够实现原始javascript而不会干扰您的react javascript。只需像往常一样使用<script>标签将其链接到底部即可。

或者，在您的代码中使用useState：

import React,{useState} from "react";
import ReactDOM from "react-dom";

const Country = () => {
  const [country,setCountry] = useState('');

  ///your javascript here

  setCountry(//return from javascript function// );

  return (
     <h1>{country}</h1>
  )
}

ReactDOM.render(<Country/>,document.getElementById("countryArea"));

您将需要将原始javascript（例如axios）的所有其他依赖项导入此文件。