Bagaimana cara mengintegrasikan JavaScript biasa (vanilla) di dalam ReactJS?

Question

Saya mencoba menggunakan visualisasi gio 3D ini ke dalam aplikasi ReactJs saya. Kode tersebut ditulis dalam vanilla JavaScript. Saya juga menemukan pembungkus untuk React dan mencobanya tetapi saya tidak dapat memilih negara yang dipilih ( onCountryPicked()) seperti yang ditunjukkan pada demo mereka . Itulah alasan utama saya melanjutkan implementasi JavaScript vanilla alih-alih pembungkus. Namun, saya merasa implementasi vanilla JavaScript sulit untuk diintegrasikan dengan aplikasi ReactJs saya.

Saya telah melihat sekeliling untuk menyelesaikan masalah tetapi sumber daya yang saya temukan tidak membantu saya. Di bawah ini adalah beberapa tempat yang pernah saya kunjungi.

• Bagaimana cara menggunakan vanilla javascript di dalam komponen Reactjs?
• https://reactjs.org/docs/integrating-with-other-libraries.html

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, 0, Math.PI / 2);
  camera.position.y = 300 * Math.sin(-tilt);
  camera.position.z = 100 + 300 * Math.cos(-tilt);
  camera.lookAt(new THREE.Vector3(0, 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>
    );
  }
}

Answer 1

Inilah titik awalnya. Saya telah menjelaskan bagian-bagian di mana React berinteraksi dengan 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>
    </>
  );
};

Demo CodeSandbox

Answer 2

Jika Anda meletakkan file javascript vanilla Anda pada tingkat hierarki yang sama dengan Anda index.htmldan menautkannya secara normal, Anda seharusnya dapat menerapkan javascript vanilla Anda tanpa mengganggu javascript react Anda. Tautkan saja di bagian bawah seperti biasa dengan <script>tag.

Atau, untuk digunakan useStatedalam kode reaksi Anda:

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

Anda perlu mengimpor dependensi tambahan apa pun untuk vanilla javascript (mis. axios) Anda ke dalam file ini.