How to integrate plain (vanilla) JavaScript inside ReactJS?

I am trying to use this 3D gio visualization into my ReactJs application. The code is written in vanilla JavaScript. I have also found wrapper for React and tried it but I am not able to pick the selected country(onCountryPicked()) as it is shown on their demo. That is the main reason I go ahead with the vanilla JavaScript implementation instead of wrapper. However, I find the vanilla JavaScript implementation difficult to integrate with my ReactJs application.

I have looked around to solve the issue but the resources I have found did not help me. The bellow are some of the places I have visited.

How to use vanilla javascript inside Reactjs ponent?
.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=".v5.js"></script>
    <script src=";></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 {
  ponentDidMount() {
  
  }

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

I have looked around to solve the issue but the resources I have found did not help me. The bellow are some of the places I have visited.

How to use vanilla javascript inside Reactjs ponent?
https://reactjs/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/d3.v5.js"></script>
    <script src="https://cdn.jsdelivr/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 {
  ponentDidMount() {
  
  }

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

Share Improve this question asked Oct 1, 2020 at 17:46 Daniel 4863 gold badges17 silver badges34 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4 +50

Here's a starting point. I've annotated the parts where React interacts with 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 ponent 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

If you put your vanilla javascript file on the same hierarchical level as your index.html and link it normally you should be able to implement your vanilla javascript without interfering with your react javascript. Just link it down at the bottom like normal with a <script> tag.

Alternatively, to use useState in you react code:

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

You will need to import any additional dependencies for your vanilla javascript (ex. axios) into this file.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745306402a4621735.html

How to integrate plain (vanilla) JavaScript inside ReactJS? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

How to integrate plain (vanilla) JavaScript inside ReactJS? - Stack Overflow

2 Answers 2

相关推荐