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和包裹。就緒（），還有一些自定義的功能，但我不能訪問updateJs()在導入文件

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

Answer 1

無需使用$(document).ready()調用jQuery的功能react。

就像您的$(document).ready()一樣，您可以使用componentDidMount()以確保呈現DOM。

然後訪問jQuery依賴庫作爲局部變量申請DOM elemnets。下面的例子顯示了這一點。

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