React中如何点击HTML按钮加载App.js？anchor标签无效求助

你当前的问题是页面加载时就自动引入了App.js，但需要点击按钮才触发加载——用a标签不行是因为a标签是跳转页面，而你要的是在当前页动态加载脚本并初始化React应用。可以按以下步骤实现：

1. 修改HTML结构 #

移除原来静态引入的App.js脚本，同时添加React应用的挂载容器：

<div class="content">
  <form action="v2/v2.html" class="form">
    <label for="user">Nama</label>
    <input type="text" name="user" id="user" />
    <button type="button" id="load-app">Load App</button>
  </form>
  <!-- 新增：React应用挂载的容器 -->
  <div id="react-root"></div>
</div>

2. 添加动态加载逻辑 #

给按钮绑定点击事件，动态创建script标签加载App.js，并处理加载完成后的初始化：

document.getElementById('load-app').addEventListener('click', function() {
  // 创建script元素
  const appScript = document.createElement('script');
  appScript.src = 'v3-website/src/App.js';

  // 脚本加载成功后的回调
  appScript.onload = function() {
    // 如果你的App.js需要手动初始化React应用，在这里执行
    // 例如用React 18的方式：
    // const root = ReactDOM.createRoot(document.getElementById('react-root'));
    // root.render(<App />);
    console.log('App.js加载完成，React应用已启动');
  };

  // 脚本加载失败的处理
  appScript.onerror = function() {
    console.error('加载App.js失败，请检查路径是否正确');
  };

  // 将script添加到页面中，开始加载
  document.body.appendChild(appScript);

  // 禁用按钮，防止重复点击加载
  this.disabled = true;
});

关键注意事项 #

• 依赖确保：如果App.js依赖React和ReactDOM，需要提前在页面引入这些依赖（比如通过CDN），示例：

  <!-- 在页面头部引入React和ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  

• App.js的初始化逻辑：如果你的App.js内部已经包含了挂载到#react-root的代码，那onload回调里可以不用额外写初始化代码；如果没有，就需要在回调里手动调用React的渲染方法。
• 路径检查：确保v3-website/src/App.js的路径正确，否则会加载失败。

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