He estado tratando de usar createElement dentro de una declaración if pero simplemente no funciona. El headerLink no se reconoce fuera de la instrucción if.
¿Alguien puede explicar lo que falta?
Lo que he probado hasta ahora:
Declarar headerLink fuera de la instrucción if. esto no funciona
Si muevo appendChild y removeChild dentro de la declaración if, comienza a funcionar. Pero eso daría como resultado un código duplicado ya que tendré que copiar lo mismo dentro de la declaración else
React.useEffect(() => { const head = document.head; const scriptType = "text/css"; if (scriptType === "text/css") { const headerLink = document.createElement( "link" ); } else { const headerLink = document.createElement( "script" ); } // this line doesn't work - headerLink is not recognized head.appendChild(headerLink); return () => { // this line doesn't work - again, headerLink is not recognized head.removeChild(headerLink); }; }, []);Puede mover la declaración del headerLink fuera de la cláusula if . Pero tendrás que usar let en ese caso.
let headerLink; if (scriptType === "text/css") { headerLink = document.createElement( "link" ); } else { headerLink = document.createElement( "script" ); }O puede usar el operador condicional ternario para crear un elemento
const headerLink = document.createElement( scriptType === "text/css" ? "link" : "script" );Sobre la base de la respuesta de Aditya y el comentario anterior de Sandil, resolvió el problema
useEffect(() => { const head = document.head; let headerScript: HTMLLinkElement | HTMLScriptElement; if(scriptType === "text/css") { headerScript = document.createElement( "link" ); } else { headerScript = document.createElement( "script" ); } head.appendChild(headerScript); return () => { head.removeChild(headerScript); }; }, []);