IT技术 - React-router：如何触发 $(document).ready()？ - 吾爱随笔录

在我当前的 React + React-router 设置中，我的组件导入了一些 jQuery 东西（owl.carousel 和 magnific popup）

我想保持代码干净，因此外部功能存储在单独的文件中。下面的代码仅在页面加载了直接 URL 时才有效，在向后导航和转发应用程序时无效。所以里面的一切都$(document).ready只能通过直接链接触发。

import '../jQuery/carousel.js';

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
    });

    $('.popup-gallery').magnificPopup({
    });
});

我该如何处理这个问题？我尝试使用 componentWillMount 并用一些自定义函数包装 .ready()，但我无法updateJs()在导入的文件中访问

class MyComponent extends Component {
  componentWillMount() {
    updateJs();
  }
}

import $ from 'jquery'; //make sure you have jquery as dependency in package.json class MyComponent extends Component { componentDidMount() { let owlCarousel = $.fn.owlCarousel; //accessing jquery function let magnificPopup = $.fn.magnificPopup; //accessing jquery function $('.owl-carousel').owlCarousel({ //call directly on mount }); $('.popup-gallery').magnificPopup({ }); } }