React中无法导入外部jQuery脚本？事件触发异常求助

咱们拆解下你遇到的两个核心问题：外部脚本的document ready事件不触发，以及React Router跳转后事件失效，这俩问题本质都和脚本加载时机、单页应用的DOM渲染机制相关。

一、外部脚本document ready未触发的解决办法 #

你提到内嵌脚本的ready能正常工作，但外部脚本不行，大概率是加载顺序或DOM就绪时机出了问题：

• 确保jQuery在自定义脚本之前引入：如果你的script.js里用了$，但jQuery还没加载完成，代码会直接报错，自然不会触发ready事件。调整引入顺序：

  <!-- 先引入jQuery -->
  <script type="text/javascript" src="/path/to/jquery-2.2.4.js"></script>
  <!-- 再引入你的自定义脚本 -->
  <script type="text/javascript" src="/path/to/script.js"></script>
  

• 把脚本放在</body>标签之前：如果脚本放在<head>里，可能DOM还未加载完成；但放在body末尾时，DOM已经就绪，$(document).ready()会立即执行，甚至你可以直接去掉ready包裹，直接写逻辑——因为此时DOM已经可用了。
• 检查脚本加载状态：打开浏览器开发者工具的Network面板，查看script.js的请求状态，如果是404说明路径仍有问题（哪怕你觉得路径正确，再核对下相对/绝对路径的差异），如果是500则是服务器端的问题。

二、React Router跳转后事件失效的核心原因与解决方案 #

React Router是单页应用路由，跳转页面时不会刷新整个浏览器页面，只是替换React组件的内容。你之前用jQuery绑定的事件仅针对初始页面加载时存在的DOM元素，路由跳转后新渲染的组件元素是动态生成的，这些元素并没有被绑定事件，因此失效。

这里按推荐程度给你几种解决方案：

1. 优先使用React原生事件处理（最佳实践） #

React有自己的DOM事件系统，尽量避免用jQuery直接绑定事件，而是在React组件中使用原生事件属性，比如onClick、onChange：

class MyButton extends React.Component {
  handleClick = () => {
    // 这里写原来jQuery事件里的逻辑
    console.log('按钮被点击了');
  }

  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

这种方式完全契合React的设计理念，不会和React的DOM更新机制冲突，路由跳转后组件重新渲染时事件也会正常绑定。

2. 用jQuery事件委托（若必须保留jQuery） #

如果因为业务需求必须用jQuery，那就改用事件委托，把事件绑定到一个不会被销毁的父元素上（比如document或者React的根容器#root），这样即使子元素是动态生成的，事件也能通过冒泡触发：

// 原来的写法（仅绑定初始存在的元素）
$('.my-btn').click(function() { /* 逻辑 */ });

// 改成事件委托的写法
$(document).on('click', '.my-btn', function() {
  // 这里写事件逻辑
});

注意：尽量缩小委托的父元素范围（比如绑定到组件的根容器而非document），这样性能会更好。

3. 在React组件生命周期中绑定/解绑事件 #

如果需要针对特定组件的元素绑定jQuery事件，可以在组件的componentDidMount钩子中绑定，在componentWillUnmount钩子中解绑，确保组件挂载时事件生效，卸载时清理避免内存泄漏：

class MyComponent extends React.Component {
  componentDidMount() {
    // 组件挂载后，绑定jQuery事件
    $('.component-element').on('mouseenter', this.handleMouseEnter);
  }

  componentWillUnmount() {
    // 组件卸载前，解绑事件
    $('.component-element').off('mouseenter', this.handleMouseEnter);
  }

  handleMouseEnter = () => {
    console.log('鼠标移入了');
  }

  render() {
    return <div className="component-element">Hover me</div>;
  }
}

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