I am working on a React App based on this example: https://github.com/facebook/create-react-app#creating-an-app
I embedded an HTML viewer in this app which calls a HTML5 page that embeds some JavaScript functions. Now I am trying to call one of the JavaScript function when clicking on a button defined in TypeScript.
Function declaration in HTML page:
function sendMessage(str)
{
theRenderArea.sendMessage(str);
}
Function definition in JavaScript embedded in the HTML page
this.sendMessage = function(b) {
if (this.isConnected()) {
b = {
type: "command",
message: b.toString()
};
var a = new h;
this.websocket.send(a.encode(b))
}
};
TypeScript viewer object opening HTML page:
function Viewer() {
return (
<>
<div id="loaderGroup" style={{"display": "none"}}><div id="loader"></div><div id="loaderText">Network calibration</div></div>
<div id="TheDiv"></div>
</>
)
}
export default Viewer
Button definition in React app:
<Button
style={{color: selected ? "#6A89FF": "#5B5C5D"}}
onClick={changeColor}>
Interact
</Button>
I tried this suggestion: Call external Javascript function from react typescript components
But couldn’t get it to work.