React-Router: Wie $ (Dokument) .ready() auslösen?

Question

In meinem aktuellen Reagieren + React-Router-Setup einige jQuery Dinge meine Komponente Importe (owl.carousel und magnific Popup)

Ich möchte den Code sauber zu halten, so dass die äußeren Merkmale sind in separaten Datei gespeichert. Der folgende Code funktioniert nur, wenn die Seite mit einer direkten URL geladen wurde und funktioniert nicht, wenn Sie die App vor- und zurück navigieren. Also alles innerhalb $(document).ready wird nur mit direkter Verbindung ausgelöst.

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

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

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

Wie verwalte ich dieses Problem? Ich habe versucht, componentWillMount und wickeln .ready() mit einigen benutzerdefinierte Funktion zu verwenden, aber ich kann nicht updateJs()

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

Answer 1

Keine Notwendigkeit, in importierten Datei zugreifen $(document).ready() verwenden Jquery Funktion in react zu nennen.

Sie können componentDidMount() nur als $(document).ready() verwenden, um sicherzustellen, dass DOM gerendert wird.

Dann Zugriff jQuery abhängigen Bibliotheken als lokale Variablen für DOM Elemente gelten. Das folgende Beispiel zeigt etwas Licht dazu.

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