Reagieren Komponente: Foundation Modal (Reveal) wird nicht geöffnet

Question

So habe ich gerade angefangen zu lernen React und Redux, also ich entschuldige mich, wenn dies eine sehr noobish Frage ist. Aber ich habe mein Google-Zitat geleert und kann nichts finden, was mir hilft.

Mein Problem ist: Ich arbeite auf einer Website mit React, Redux und Foundation 6. Eine meiner React-Komponenten hat einen Link, der bei einem Klick ein Modal mit einer bestimmten Warnung für diesen Link öffnet. So habe ich eine Komponente mit meinem modal Markup erstellt:

ComponentModal.js:

import React, { PropTypes } from 'react'; 
const Modal =() => (
    <div className="reveal" id="exampleModal1" data-reveal> 
    <h1>Awesome. I Have It.</h1> 
    </div> 
); 

export default Modal; 

Die Komponente mit einem Link ein paar Sachen macht, aber im Grunde haben eine

<a data-open="exampleModal1">Click me for a modal</a>

tag in es ist render.

Und obwohl die Überprüfung der Seite bestätigt, dass das Markup für das Modal existiert, passiert nichts, wenn ich auf den Link klicke.
Wenn ich das Popup von der Komponente in das DOM verschiebe, funktioniert die Verbindung.
Einige Versuch und Irrtum zeigt mir, dass, wenn ich manuell $(document).foundation(); in der Konsole ausführen, wenn ComponentModal gerendert wird, das Popup wie vorgesehen funktioniert.

Also meine Frage ist ein bisschen zwei Fragen: 1. Wie kann ich, in Redux, $(document).foundation(); ausführen, wenn mein ComponentModal fertig Rendering ist? Vielleicht irre ich mich, aber ich habe nicht die componentDidMount() Methode zur Verfügung, wo es Sinn machen könnte, diesen Anruf zu machen? 2. Ist das ein völlig falscher Weg?

Hoffe, es ist nicht zu verwirrend und nicht zu dumm, eine Frage :)

Answer 1

FYI, diese Frage/Lösung nichts mit REDUX zu tun hat!

Das Problem ist, dass Sie versuchen, REACT UND Jquery verwenden, um Ihre Seite coole Dinge zu machen.

Sie sollten wirklich das eine oder andere wählen.

$(document).foundation() ist eine Jquery-Bibliothek.

Stattdessen sollten Sie etwas wie React Foundation verwenden, das die jQuery-Abhängigkeit entfernt und Ihnen Basiskomponenten mit react zur Verfügung stellt.

Answer 2

Sie können $(document).foundation() in Reagieren innerhalb componentDidMount der Komponente, die das Reval modal oder noch besser hat Sie können dies innerhalb von ComponentDidMount der am weitesten oben in Ihrer App tunent.

componentDidMount in React wird einmal ausgeführt, nachdem alle mit dieser Komponente verknüpften DOM-Knoten bereitgestellt wurden. Was $(document).foundation() tut, wenn es in componentDidMount ausgeführt wird, ist, dass es Ereignishandler auf den Elementen bindet, die über grundlegende Attribute wie Data-Dropdown oder Data-Reveal verfügen.