动态定义脚本标记

Question

我的项目必须使用两个不同的模板(用户/面板)。因此，我需要动态定义java脚本标记。我试了这么多，但没有解决我的问题。最后，在下面的代码，有时脚本加载正确，有时不正确。我有各种控制台错误。如何加载像html页面这样的java脚本标记。

 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>
)

}    

Answer 1

您应该在一个loadScript内部调用useEffect脚本，并在卸载组件时删除该脚本。

​

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>
)

}

​