ReactJS中如何点击按钮动态加载JavaScript文件？

问题原因 #

你遇到的Unexpected token '<'错误，本质是请求的filetoload.js返回的是HTML内容（通常是项目的index.html），而非预期的JS代码。这是因为src目录下的文件会被Webpack打包处理，直接通过相对路径加载会触发路由 fallback（你的应用启用了路由），返回index.html，导致JS解析时遇到HTML的<符号报错。

解决步骤 #

1. 调整文件位置
   将filetoload.js从src目录移动到public目录下，新的文件结构：

   src
      index.js
      app.js
   public
      index.html
      filetoload.js
   

2. 编写正确的动态加载函数
   在React组件中实现点击按钮加载脚本的逻辑，示例代码如下：

   import { useState } from 'react';
   
   function App() {
     const [isLoaded, setIsLoaded] = useState(false);
   
     const loadScript = () => {
       const script = document.createElement('script');
       script.src = '/filetoload.js'; // 指向public目录下的文件
       script.type = 'text/javascript';
       script.onload = () => {
         console.log('脚本加载完成');
         setIsLoaded(true);
       };
       script.onerror = (error) => {
         console.error('脚本加载失败:', error);
       };
       document.body.appendChild(script);
     };
   
     return (
       <div>
         <button onClick={loadScript} disabled={isLoaded}>
           {isLoaded ? '已加载' : '加载脚本'}
         </button>
       </div>
     );
   }
   
   export default App;
   

3. 验证逻辑
   启动应用后点击按钮，控制台会输出loaded（来自filetoload.js）和脚本加载完成，说明加载成功。

额外说明 #

如果必须从src目录加载文件，也可以通过Webpack的import()语法实现动态导入，示例：

const loadScript = async () => {
  try {
    await import('./filetoload.js');
    console.log('脚本加载完成');
  } catch (error) {
    console.error('加载失败:', error);
  }
};

这种方式不需要移动文件，Webpack会自动处理打包，适合需要代码分割的场景。

内容的提问来源于stack exchange，提问作者Nishtha Sharma