如何将网页模板的JavaScript文件引入React组件并解决效果失效问题

你把脚本放在index.html不生效的核心原因是：传统模板的JS脚本都是在页面DOM加载完成后就立即执行选择元素、绑定事件的逻辑，但React的组件渲染是异步的，脚本执行时你的组件DOM还没挂载到页面上，所以选择器找不到对应元素，交互效果自然无法生效。

方案1：组件挂载后动态加载脚本（完全不用修改原JS代码） #

把你需要用到的所有JS文件（包括依赖的jQuery、模板交互脚本）放到项目public目录下，然后在使用这套模板的页面/父组件中通过useEffect按依赖顺序加载脚本即可：

import { useEffect } from 'react';

const TemplatePage = () => {
  useEffect(() => {
    // 封装脚本加载方法，保证按顺序加载依赖
    const loadScript = (src) => {
      return new Promise((resolve) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = false;
        script.onload = () => resolve();
        document.body.appendChild(script);
      })
    }

    const initTemplate = async () => {
      // 先加载依赖，比如jQuery，再加载模板交互脚本
      await loadScript('/js/jquery.min.js');
      await loadScript('/js/你的模板交互文件名.js');
      // 如果用到wow这类需要手动初始化的插件，脚本加载完成后调用初始化即可
      if(window.WOW) new WOW().init();
    }

    initTemplate();

    // 组件卸载时清理加载的脚本和绑定的全局事件，避免内存泄漏
    return () => {
      document.querySelectorAll('script[src^="/js/"]').forEach(el => el.remove());
      window.$ && $(window).off();
    }
  }, [])

  return (
    {/* 你的模板DOM代码 */}
    <h6 className="wow fadeInUp" data-wow-delay=".5s"><span className="text-uppercase id-color-2"> Market</span></h6>
  )
}
export default TemplatePage;

方案2：少量修改原JS文件导出初始化方法（更稳定可控） #

不需要逐个导出JS里的函数，只要把原来的自执行逻辑包裹成可导出的初始化方法即可，改造成本极低：

1. 原JS代码修改示例：

import $ from 'jquery'; 
// 把原来的自执行函数改成可导出的方法，内部逻辑完全不用改动
export const initTemplate = () => {
    'use strict';
    /* 原有所有逻辑原封不动保留即可 */
    var mobile_menu_show = 0;
    var v_count = '0';
    var mb;
    var instances = [];
    var $window = $(window);
    var $tmp_h = '90';
    var $op_header_autoshow = 0;
    var grid_size = 10;
     
    if($('header').hasClass("has-topbar")){
          $tmp_h = '125px';
    }
    // 原有其他所有逻辑全部保留
}

2. 组件内调用：

import { useEffect } from 'react';
import { initTemplate } from './你的JS文件路径';

const TemplatePage = () => {
  useEffect(() => {
    // 组件挂载完成后执行初始化
    initTemplate();
    // 卸载时清理全局事件
    return () => {
      $(window).off();
    }
  }, [])

  // 组件DOM逻辑不变
}

注意事项 #

• 所有交互脚本的执行必须等React把虚拟DOM挂载到真实DOM之后触发，所以必须放在useEffect的回调中，空数组作为依赖项保证首次挂载完成后只执行一次
• 如果页面有动态更新DOM、路由切换的逻辑，DOM更新完成后需要重新调用一次初始化方法，重新绑定事件
• 开发环境如果开启了React.StrictMode，useEffect会执行两次导致重复绑定事件，可以临时关闭严格模式，或者初始化前先清理一次已绑定的事件

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