我正在尝试使用这个3D gio visualization进入我的 ReactJs 应用程序。该代码是用普通 JavaScript 编写的。我还发现了wrapper for React并尝试过，但我无法选择所选国家/地区(onCountryPicked())，因为它显示在其 demo 上。这是我继续使用普通 JavaScript 实现而不是包装器的主要原因。但是，我发现普通 JavaScript 实现很难与我的 ReactJs 应用程序集成。
我已经四处寻找解决问题的方法，但我找到的资源对我没有帮助。以下是我去过的一些地方。
- How to use vanilla javascript inside Reactjs component?
- 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>
......
示例.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>
</>
);
};
关于javascript - 如何在 ReactJS 中集成普通(普通)JavaScript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64160680/