React JS中如何集成jQuery toggleClass及自定义custom.js函数

你现在的代码有3个直接导致custom.js不执行的硬伤：

• 所有静态脚本的<script>标签错误添加了type="text/jsx"属性，浏览器不会将该类型标识的文件作为普通JavaScript解析执行，等于这几个脚本引了个寂寞
• 重复引入jQuery造成实例冲突：你既在HTML中引入了public目录下的压缩版jQuery，又通过npm安装依赖在入口文件中导入jQuery，两个独立的jQuery实例无法共享事件绑定上下文
• custom.js内存在语法错误：import $ from 'jquery这行代码末尾缺少闭合单引号，且静态引入的JS文件默认不支持ES模块裸导入规范，这行代码会直接触发语法错误，导致整个custom.js的逻辑全部中断运行

根据你的项目场景二选一即可：

方案1：保留静态资源引入方式（改动最小，适配你现有大量老JS逻辑） #

1. 删除所有静态script标签上的type="text/jsx"属性，普通外部JS脚本无需声明该类型，现代浏览器默认会按JavaScript解析，不需要额外配置
2. 删除custom.js开头的import $ from 'jquery行，你已经在custom.js之前引入了全局jQuery，直接使用全局$变量即可
3. 确认脚本引入顺序保持「jQuery → popper → bootstrap → custom.js」即可，清浏览器缓存刷新就能生效

修正后的script标签示例：

<script src="%PUBLIC_URL%/assets/js/jquery-3.2.1.slim.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script> 
<script src="%PUBLIC_URL%/assets/js/custom.js"></script>

方案2：走npm构建流（适配React/Vue等使用打包工具的项目） #

1. 删除HTML中所有引入jQuery、popper、bootstrap、custom.js的静态script标签，避免重复引入冲突
2. 在项目入口index.js中全局挂载依赖，保证所有脚本共用同一个jQuery实例：

import $ from 'jquery'
import Popper from 'popper.js'
// 挂载到全局window
window.$ = window.jQuery = $
window.Popper = Popper
// 引入bootstrap JS
import 'bootstrap/dist/js/bootstrap.min.js'
// 引入你写的custom逻辑，注意把custom.js挪到src目录下
import './custom.js'

3. 删除custom.js中单独导入jQuery的语句，直接使用全局$编写逻辑即可

方案3：零依赖原生实现（推荐，仅类名切换场景无需加载整个jQuery） #

如果只是实现类名切换这类简单交互，完全可以去掉jQuery依赖，用原生JS实现，所有现代浏览器全兼容，也不会出现引入冲突问题：

document.addEventListener('DOMContentLoaded', function () {
  const filterPanel = document.querySelector('.plp-filter')
  const openBtn = document.querySelector('.mobile-filter-btn')
  const closeBtn = document.querySelector('.mob-heading-close-btn')

  openBtn?.addEventListener('click', () => filterPanel?.classList.add('visible'))
  closeBtn?.addEventListener('click', () => filterPanel?.classList.remove('visible'))

  // 其余custom.js内的功能函数都可以按原生JS语法改写，不需要依赖jQuery
})

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