React.js und Isotope.js
Ich checke React.js aus und versuche herauszufinden, wie diese Bibliothek mit Isotope.js . Die Dokumentation von React besagt, dass es gut mit anderen Bibliotheken zusammenspielt, aber die Verwendung mit einer Bibliothek, die DOM selbst verändert, scheint keinen Sinn für die Verwendung von React zu haben.
Kann mir jemand erklären, wie ich React in meiner Webanwendung nutzen kann, die Isotope.js als Layout verwendet?
4 Antworten
Du kannst das dom direkt in React manipulieren. Dies ermöglicht die Integration vorhandener JS-Bibliotheken oder für benutzerdefinierte Anforderungen, die von React nicht gut behandelt werden.
Hier finden Sie ein Beispiel:
Und so sieht es aus:
Das Problem bei der Integration von React und einer Bibliothek wie Isotope ist, dass Sie am Ende zwei verschiedene Bibliotheken haben werden, die versuchen, den gleichen dom Teilbaum zu aktualisieren. Da React mit Diffs arbeitet, wird davon ausgegangen, dass es allein das Dom domyfing ist.
Die Idee könnte also sein, eine React-Komponente zu erstellen, die nur einmal rendert und niemals selbst aktualisiert wird. Sie können dies sicherstellen mit:
%Vor%Damit können Sie:
- Verwenden Sie React, um Ihre Isotop-Item-HTML-Elemente zu generieren (Sie können sie auch ohne React erstellen)
- Am
componentDidMount, initialisiere das Isotop auf dem von React gemounteten dom-Knoten
Und das ist alles. Jetzt wird React diesen Teil des Doms nie mehr aktualisieren, und Isotope kann es beliebig manipulieren, ohne React zu stören.
Außerdem ist Isotope, soweit ich es verstehe, nicht dazu gedacht, mit einer dynamischen Liste von Elementen verwendet zu werden, daher ist es sinnvoll, eine React-Komponente zu haben, die niemals aktualisiert wird.
Hier ist eine funktionierende Version mit Mauerwerk, du solltest es leicht genug finden, um nach Isotope zu portieren (oder benutze Mauerwerk :)) Ссылка .
Hier ist der Kern des Codes, der es funktionieren lässt (und es React ermöglicht, seine Aufgabe zu erfüllen).
%Vor%Hier ist eine aktualisierte Version des obigen Codes von James:
Wenn Sie ein Webpack verwenden, denken Sie daran, Ihre Einstellungen zu ändern webpack config für die Arbeit mit Isotope.
%Vor%Verwendung:
Übergeben Sie einfach die Elemente, die Sie im Isotop behalten möchten, in die ItemGrid-Komponente als untergeordnete Elemente:
%Vor%Alternativen
Wenn möglich, können Sie die react-maurer-Komponente verwenden.
Tags und Links javascript reactjs jquery-isotope