React-router:如何触发$(document).ready()？

Question

在我目前的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();
  }
}

Answer 1

无需使用$(document).ready()调用jquery函数react.

你可以componentDidMount()像你一样使用它$(document).ready()来确保DOM渲染.

然后访问jQuery依赖库作为局部变量来申请DOMelemnets.下面的例子说明了这一点.

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({
    });
  }
}