React中Arsha模板JS功能失效问题求助

问题根源 #

React是动态构建DOM的，而Arsha模板的main.js默认是在页面静态加载完成后执行初始化逻辑。当你在index.html里直接引入main.js时，它会在React组件渲染、DOM元素生成前就运行，导致找不到目标元素（比如Swiper容器、Spinner），最终出现Spinner不消失、交互功能失效的情况。

分步解决 #

1. 调整main.js的执行方式 #

把main.js里的直接执行代码封装成一个全局可调用的函数，避免DOM未就绪时就执行：

// 修改assets/js/main.js
window.initArsha = function() {
  // 原有的DOMContentLoaded里的所有代码挪到这里
  // 隐藏Spinner
  const preloader = document.querySelector('#preloader');
  if (preloader) preloader.style.display = 'none';

  // 初始化Swiper
  const swiper = new Swiper(".swiper-container", {
    pagination: {
      el: ".swiper-pagination",
    },
    // ...其他原有的Swiper配置
  });

  // 初始化AOS
  AOS.init({
    duration: 1000,
    easing: "ease-in-out",
  });

  // 其他Glightbox、Isotope等初始化逻辑
};

2. 移除index.html中的main.js引入 #

保留依赖JS的引入（比如swiper、bootstrap这些），但删掉main.js的引入：

<!-- index.html 保留这些依赖 -->
<script src="%PUBLIC_URL%/assets/vendor/aos/aos.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/php-email-form/validate.js"></script>

<!-- 删掉这行 -->
<!-- <script src="%PUBLIC_URL%/assets/js/main.js"></script> -->

3. 在React组件中触发初始化 #

在你的根组件（比如App.js）里，用useEffect钩子在组件挂载完成后调用initArsha：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 确保window.initArsha存在再调用
    if (window.initArsha) {
      window.initArsha();
    }

    // 可选：组件卸载时清理实例（比如Swiper）
    return () => {
      if (window.swiper) {
        window.swiper.destroy();
      }
    };
  }, []); // 空数组确保只执行一次

  return (
    // 你的Arsha模板HTML结构转换成的JSX
    <div className="App">
      <div id="preloader"></div>
      {/* 其他模板内容 */}
    </div>
  );
}

export default App;

4. 验证依赖加载顺序 #

确保bootstrap.bundle.min.js在其他依赖之前加载，因为Arsha模板的部分组件依赖Bootstrap的JS功能。

关键说明 #

• 非React环境下，静态HTML加载完成后DOM就存在，main.js能正常找到元素；但React是动态渲染，必须等组件挂载完成后再执行初始化逻辑。
• 如果你的模板内容拆分成多个React组件，要确保所有需要初始化的DOM元素都渲染完成后再调用initArsha（比如在最外层父组件里使用useEffect）。

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