1. 在指定的页面中引入特定js文件时

    useEffect(() => {  
    // 动态加载 china.js 脚本  
    const script = document.createElement('script');  
    script.src = '/js/echarts.min.js'; // 指定 echarts.min.js 的路径  
    script.async = true;  
    script.onload = () => {  
        // 确保 echarts.min.js 数据加载完成  
        console.log('echarts.min.js 已加载');  
        ...
    };  
    document.body.appendChild(script);  
    
    
    // 清理副作用:卸载时移除 script 标签  
    return () => {  
        document.body.removeChild(script);  
    };  
    }, []);
    

    需要在public目录下创建js目录,保证文件可通过WEB访问 2. 如果动态引入的文件依赖import引入的库文件,需要把import引入的库文件,注册在windows

    import React, {useEffect, useRef} from 'react';
    import * as echarts from "echarts";  
    // 将 echarts 挂载到全局 window 对象上  
    if (typeof window !== 'undefined') {  
    window.echarts = echarts;  
    }  
    interface ChinaMapProps {  
    data?: any[];  
    }  
    function ChinaMap(props: ChinaMapProps) {  
    const chartRef = useRef(null); // 用于存储 ECharts 容器引用  
    useEffect(() => {  
        // 动态加载 china.js 脚本  
        const script = document.createElement('script');  
        script.src = '/js/china.js'; // 指定 china.js 的路径  
        script.async = true;  
        script.onload = () => {  
            // 确保 china.js 数据加载完成  
            console.log('china.js 已加载');  
            initChart(); // 初始化图表  
        };  
        document.body.appendChild(script);  
        // 清理副作用:卸载时移除 script 标签  
        return () => {  
            document.body.removeChild(script);  
        };  
    }, []);
    

由于windows中并不存在echarts属性,因此上面的代码注册时编译时会失败,需要在/src/global.d.ts文件加入属性

// global.d.ts  
declare global {  
    interface Window {  
        echarts: any; // 将 echarts 挂载到 window 对象上  
    }  
}  
  
export {}; // 防止该文件被当作模块处理