In a ReactJS component I need to call a function (via window object) defined through a dynamically created script. I have the following example for best understanding. This is a simplified code example:
File RFo.js:
//Generic helper function for create a script of only code (not src):
function SetScript(id, code) {
if (!document.getElementById(id)) //Only if script not already exists
{
const script = document.createElement("script");
script.type = 'text/babel';
script.textContent = code;
script.id = id;
script.async = true;
document.body.appendChild(script);
}
}
//Calling this function outside of RFo component, it works!
SetScript("myScriptId", "function myFunc(v) { return v+1; }");
// RFo component
export const RFo = () =>
{
//console debug
console.log(document.getElementById("myScriptId")); //always shows the script created
console.log(window["myFunc"]); //it works as SetScript function was called outside RFo component
return (
<div>
MyFunc result: {window["myFunc"](10)}
</div>
);
}
My problem is that the call
SetScript("myScriptId", "function myFunc(v) { return v+1; }"); I want to have it inside the RFo component (because script code could be sent as props). Example:
// RFo component
export const RFo = () =>
{
//moved inside RFo component
SetScript("myScriptId", "function myFunc(v) { return v+1; }");
//console debug
console.log(document.getElementById("myScriptId")); //always shows the script created
console.log(window["myFunc"]); //shows 'undefined' as SetScript function is called inside RFo component
return (
<div>
MyFunc result: {window["myFunc"](10)}
</div>
);
}
If I put it inside of RFo component it doesn't work. I guess it should be something simple and conceptual, or could be a workaround. I am newbie to React and JS. I really appreciate your help.
I don't understand why you want to add new script component into DOM, that should be a bad practice, you can do this instead:
function SetScript(functionName, callback){
window[functionName] = callback
}
and then to define global function inside react component:
export const RFo = () =>
{
// Pass function to second parameter instead of string
SetScript("myFunc", function myFunc(v) {
return v+1;
});
// Print global function to console
console.log(window["myFunc"])
return (
<div>
MyFunc result: {window["myFunc"](10)}
</div>
);
}
You can see it in codepen