如何将普通(香草) JavaScript集成到ReactJS中？
如何将普通(香草) JavaScript集成到ReactJS中？
提问于 2020-10-01 17:46:55
我正在尝试在我的ReactJs应用程序中使用这个三维吉奥可视化。代码是用普通的JavaScript编写的。我也找到了反应包装，并尝试了它，但我无法选择选定的国家(onCountryPicked())，因为它显示在他们的演示。这就是我继续使用普通的JavaScript实现而不是包装器的主要原因。但是，我发现普通的JavaScript实现很难与我的ReactJ应用程序集成。
我环顾四周解决了这个问题，但我找到的资源并没有帮助我。下面是我参观过的一些地方。
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>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-04 18:50:32
这是一个起点。我已经注释了与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>
</>
);
};Stack Overflow用户
发布于 2020-10-01 17:56:37
如果您将您的香草javascript文件放在与您的index.html相同的层次上，并将其正常链接，您应该能够实现您的香草javascript，而不会干扰您的反应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 (ex )导入任何附加的依赖项。( axios)到这个文件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64160680
复制相关文章
相似问题
腾讯云开发者
