I am calling a JavaScript SDK and invoking it's function in following fashion in my HTML code and it is working fine as expected.
Here is the code
<!DOCTYPE html>
<head>
<title>My Test App</title>
<script src="scripts/abc.js"></script>
<script src="scripts/xyz.js" onload="initXYZ('Param1')"></script>
</head>
</html>Now, I want to call this same Javascript SDK from a react web page. I want to call the scripts and invoke the initXYZ('Param1') function.
So far, I am able to load the SDK, but I am not sure how to call the function as i did above. Here is the code I wrote in react app.
import React, {useEffect, useRef} from "react";
import "./App.css"
const App = () => {
const instance = useRef(null);
useEffect(() => {
const settingsTag = document.createElement("script");
settingsTag.src = "scripts/abc.js";
instance.current.appendChild(settingsTag);
const websdkTag = document.createElement("script");
websdkTag.src = "scripts/xyz.js";
instance.current.appendChild(websdkTag);
}, []);
return (
<>
<h1>My React app</h1>
<div ref={instance} >
</>
);
};
export default App;Can you please help me to understand how to invoke the function in above code. Also is there a better way to what I did here?
from How to load a JavaScript file and call a JS function in a react web app?
No comments:
Post a Comment