Mi proyecto tiene que usar dos plantillas diferentes (usuario/panel). Entonces necesito definir dinámicamente las etiquetas de java script. Intenté tantas cosas pero no resolví mi problema. En la última solución en el código a continuación, a veces los scripts se cargan correctamente, a veces no. Tengo varios errores de consola. ¿Cómo puedo cargar etiquetas de script Java como la página html?
import '../assets/css/bootstrap.css'; import '../assets/css/style.css'; import '../assets/css/responsive.css'; import React,{useState,useEffect} from 'react'; import {Helmet} from 'react-helmet'; export function Home(){ var loadScript = function(src) { var tag = document.createElement('script'); tag.async = true; tag.src = src; document.body.appendChild(tag); } loadScript('./assets/js/jquery.js'); loadScript('./assets/js/bootstrap.min.js'); loadScript('./assets/js/popper.min.js'); loadScript('./assets/js/jquery-ui.js'); loadScript('./assets/js/jquery.fancybox.js'); return( <div> <Helmet> <title>{model.Title}</title> <meta name="description" content={model.Desc}/> <meta name="keywords" content={model.Keys}/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=0"></meta> </Helmet> ....... </div> ) }Debe llamar al script loadScript dentro de useEffect y también debe eliminar el script cuando desmonte el componente.
import '../assets/css/bootstrap.css'; import '../assets/css/style.css'; import '../assets/css/responsive.css'; import React,{ useEffect } from 'react'; import { Helmet } from 'react-helmet'; const useScript = (src) => { useEffect(() => { const tag = document.createElement('script'); tag.async = true; tag.src = src; document.body.appendChild(tag); return () => { document.body.removeChild(tag); } }, [src]) } export function Home(){ useScript('./assets/js/jquery.js'); useScript('./assets/js/bootstrap.min.js'); useScript('./assets/js/popper.min.js'); useScript('./assets/js/jquery-ui.js'); useScript('./assets/js/jquery.fancybox.js'); return( <div> <Helmet> <title>{model.Title}</title> <meta name="description" content={model.Desc}/> <meta name="keywords" content={model.Keys}/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=0"></meta> </Helmet> ....... </div> ) }