2017-10-24 3 views
3

Ich versuche, react-beautiful-dnd in meinem neuen ClojureScript und Reagent Anwendung zu verwenden. Laut dem Blog here, heißt es, dass ich die Datei mit :foreign-libs in meiner project.clj Datei einschließen muss.enthalten fremde Bibliotheken in Clojurescript-Projekt

Ich habe es so konfiguriert, wie unten

:cljsbuild 
    {:builds {:min 
      {:source-paths ["src/cljs" "src/cljc" "env/prod/cljs"] 
      :compiler 
      {:output-to  "target/cljsbuild/public/js/app.js" 
       :output-dir  "target/cljsbuild/public/js" 
       :source-map  "target/cljsbuild/public/js/app.js.map" 
       :optimizations :advanced 
       :foreign-libs [{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js"}] 
       :pretty-print false}} 
      :app 
      {:source-paths ["src/cljs" "src/cljc" "env/dev/cljs"] 
      :figwheel {:on-jsload "toka.core/mount-root"} 
      :compiler 
      {:main "toka.dev" 
       :asset-path "/js/out" 
       :output-to "target/cljsbuild/public/js/app.js" 
       :output-dir "target/cljsbuild/public/js/out" 
       :source-map true 
       :optimizations :none 
       :pretty-print true}} 



      } 
    } 

bekam ich die kompilierte Datei aus here, die ich in meinem Projekt kopiert haben. Obwohl ich nach all diesen Änderungen immer noch nicht in der Lage bin, oder Droppable in meiner Komponente zu verwenden.

In meiner Komponente Ich habe sie erklärt, wie unten

(def DragDropContext (reagent/adapt-react-class js/DragDropContext)) 
(def Droppable (reagent/adapt-react-class js/Droppable)) 

jemand kann mir bitte helfen zu verstehen, was ich hier falsch mache? Ich bekomme Fehler wie unten

Uncaught ReferenceError: DragDropContext is not defined 
    at core.cljs?rel=1508832729388:11 
(anonymous) @ core.cljs?rel=1508832729388:11 

Anmerkung: Ich habe nicht hinzugefügt jedes provide Attribut in foreign-libs als ich von Paket nicht sicher bin. Auch bin ich nicht sicher, ob ich etwas :require in meiner core.cljs Komponentendatei tun muss.

+0

Ich fand eine Alternative zu 'react-beautiful-dnd'. Es ist in http://cljsjs.github.io/ als '[cljsjs/tagula" 3.6.8-1 "]' aufgeführt. Funktioniert auf ziemlich ähnliche Weise. – S4beR

Antwort

0

Sie müssen :provides hinzufügen (Sie können wählen, welchen Namen Sie möchten, z. B. react-beautiful-dnd) und dann require es so geladen wird. Da es auf React abhängt, sollten Sie es in requires angeben (zB cljsjs.react, wenn Sie reagieren als CLJSJS Abhängigkeit enthalten):

[{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js" 
    :provides ["react-beautiful-dnd"] 
    :requires ["cljsjs.react"]}] 

Und in Ihrem Namensraum:

(ns my.ns 
    (:require 
    [cljsjs.react] 
    [react-beautiful-dnd])) 
+0

Ich habe das versucht, indem ich einen zufälligen Paketnamen (und sogar den, den du erwähnt hast) hinzufüge, aber es bekomme ich immer noch den gleichen Fehler. – S4beR

+0

Könnten Sie bitte überprüfen, ob die Datei "react-beautiful-dnd.js" die globalen Variablen enthält, auf die Sie verweisen möchten (z. B. 'js/DragDropContext')? –

+0

Ja, es hat 'DragDropContext', aber Sie haben auch viele andere Sachen, von denen ich nicht sicher bin, ob sie korrekt sind. Ich habe die Datei von https://d33wubrfki0l68.cloudfront.net/js/d5f287a23d57e9d42e6e810729077cb5c92ae85c/static/preview.ad7782b059bd6c21ece8.bundle.js kopiert – S4beR

0

ich mit dem gleichen Problem wurde struggeling und fand die Lösung. Die Komponenten wurden in einen separaten Namensraum gestellt und müssen so referenziert werden:

(def DragDropContext (reagent/adapt-react-class js/ReactBeautifulDnd.DragDropContext)) 
(def Droppable (reagent/adapt-react-class js/ReactBeautifulDnd.Draggable)) 
Verwandte Themen