在指定的页面中引入特定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 {}; // 防止该文件被当作模块处理