Réagir-routeur : Comment déclencher $(document).prêt()?

Dans mon Réagir + Réagissent-configuration de routeur, mon composant les importations de certains jQuery choses (chouette.carrousel et le magnific popup)

Je veux avoir un code propre, de sorte que les caractéristiques externes sont stockées dans un fichier distinct. Le code ci-dessous fonctionne uniquement lorsque le chargement de la page avec l'URL directe et ne fonctionne pas lors de la navigation en arrière et en avant de l'application. Donc, tout à l'intérieur de $(document).ready est déclenché uniquement avec un lien direct.

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

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

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

Comment puis-je gérer ce problème? J'ai essayé d'utiliser componentWillMount et l'envelopper .prêt() avec la fonction personnalisée, mais je ne peux pas accéder updateJs() dans le fichier importé

class MyComponent extends Component {
  componentWillMount() {
    updateJs();
  }
}
InformationsquelleAutor Sergey Khmelevskoy | 2016-12-04
  1. 10

    Pas besoin d'utiliser $(document).ready() d'appel de fonction jquery dans react.

    Vous pouvez faire usage de componentDidMount() tout comme votre $(document).ready() pour s'assurer que DOM est rendu.

    Alors accès jQuery bibliothèques dépendantes comme des variables locales à appliquer pour DOM elemnets. L'exemple ci-dessous montre un peu de lumière sur ce.

    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({
    });
  }
}
    • Je vous remercie de votre réponse, cela fonctionne bien. Mais de cette façon, le code a l'air dur à lire. Dans le projet actuel, c'est 100 lignes de jquery et de 20 lignes de jsx qui je voudrais séparer. Connaissez-vous une façon de comment je peux exporter fonction de .js, faire une importation de composants et de faire référence à une fonction comme callScripts() ou refresh() ?
    • Une façon consiste à attribuer à votre jQuery fonction de window objet pour accéder à react composant. Et une chose de plus essayer de react les bibliothèques comme des solutions de rechange pour votre jQuery bibliothèques.
    InformationsquelleAutor Jyothi Babu Araja