En un componente de ReactJS, necesito llamar a una función (a través de un objeto de ventana) definida a través de un script creado dinámicamente. Tengo el siguiente ejemplo para una mejor comprensión. Este es un ejemplo de código simplificado:
Archivo 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> ); } Mi problema es que la llamada SetScript("myScriptId", "function myFunc(v) { return v+1; }"); Quiero tenerlo dentro del componente RFo (porque el código del script podría enviarse como accesorios). Ejemplo:
// 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> ); }Si lo pongo dentro del componente RFo, no funciona. Supongo que debería ser algo simple y conceptual, o podría ser una solución. Soy novato en React y JS. Realmente aprecio tu ayuda.
No entiendo por qué desea agregar un nuevo componente de secuencia de comandos en DOM, eso debería ser una mala práctica, puede hacer esto en su lugar:
function SetScript(functionName, callback){ window[functionName] = callback }y luego para definir la función global dentro del componente de reacción:
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> ); }Puedes verlo en codepen