My project has to use two diffirent template(user/panel). So i need to define java script tags dynamically. I tried so much thing but not solved my problem. On last solition at below code, sometimes scripts loading correct sometimes not. I got various console errors. How can i load java script tags like html page.
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>
)
}
You should call the loadScript script inside a useEffect and also should remove the script when you unmount the component.
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>
)
}