Fullpage.js mit React - mehrere Aufrufe

Question

Ich muss eine Website in React implementieren, die zwei Seiten haben wird und jeder von ihnen wird horizontale Folien haben. Ich überprüfte verschiedene Implementierungen von React Fullpage, aber keiner von ihnen schien für das, was ich brauche, in Ordnung zu sein und daher habe ich mich entschieden, https://github.com/alvarotrigo/fullPage.js mit react zu verwenden. Ich möchte es mehrmals nennen - in zwei verschiedenen Komponenten mit unterschiedlichen Parametern. So in jeder der Komponenten habe ich diesen Code mit unterschiedlichen Anker:

componentWillMount() { 
    console.log("Will ount technical"); 
    $(document).ready(function() { 
     $.fn.fullpage.destroy('all'); 
     $('#fullpage').fullpage({ 
     anchors:['welcome', 'data'], 
     lockAnchors: false, 
     slidesNavigation: true 
     }); 
    }); 
    } 

Wenn ich jede der Seiten separat öffnen (nach dem Aktualisieren) beide von ihnen arbeiten, aber wenn ich zu jedem von ihnen navigieren Ich bin immer die Folgefehler: fullPage: Fullpage.js kann nur einmal initialisiert werden und Sie tun es mehrmals! Ich fand in einem der Foren, dass ich vielleicht das verwenden sollte: $.fn.fullpage.destroy('all'); Aber es funktioniert nicht für mich, wenn ich diesen Code verwende, bekomme ich einen Fehler TypeError: $ .fn.fullpage.destroy ist keine Funktion

Ich bin mir nicht sicher, was soll ich tun, können Sie bitte helfen?

Answer 1

Der einfachste Weg wäre, verschiedene Fullpage.js Container zu verwenden. Auf diese Weise können sie bedingt initialisieren:

if($('#container1').length){ 
    $('#container1').fullpage({YOUR_OPTIONS}); 
} 

if($('#container2').length){ 
    $('#container2').fullpage({YOUR_OPTIONS}); 
} 

Andernfalls Sie alle zuvor verwendeten Instanz zerstören kann, aber man muss vorsichtig sein, um nicht das Verfahren vor der ersten Initialisierung zerstören nennen:

if(typeof $.fn.fullpage !== 'undefined'){ 
    $.fn.fullpage.destroy('all'); 
} 
$('#fullpage').fullpage({YOUR_OPTIONS});