Wie bereitet man eine React.js-Komponente für die Verwendung in ClojureScript als externe Reagent-Komponente vor?

Question

Ich möchte diese React.js-Komponente als eine fremde Reagent-Komponente in einer ClojureScript-Anwendung verwenden:

https://github.com/felixrieseberg/React-Spreadsheet-Component.

Diese Komponente ist jedoch im Repository nicht zur Verfügung:

http://cljsjs.github.io/.

Wenn eine React.js-Komponente im Verzeichnis verfügbar ist, dann wäre die Verwendung mit Reagent so einfach wie im folgenden Beispiel.

(ns demo.views 
    (:require [reagent.core :as reagent] 
      [cljsjs.reactable]]) 

(defn example [] 
    [:div 
    [:> Reactable.Table 
    {:data (clj->js [ 
       {:name "Foo" :section 51} 
       {:name "Bar" :section 51} 
       ])} 
    ] 
    ] 
) 

Ich mag würde wissen, was ich mit der Tabellenkomponente Reagieren zu tun haben, so dass ich es auf eine ähnliche einfache Art und Weise nutzen können. Wie bereitet man eine React.js-Komponente für die Verwendung in ClojureScript als externe Reagent-Komponente vor? Bitte geben Sie eine klare Rezeptbeschreibung an.

Hinweis: Diese Frage How to use a ReactJS Component with Clojurescipt/Reagent sieht ähnlich aus, beantwortet aber meine Frage nicht.

Answer 1

Es läuft darauf hinaus, wie Sie JavaScript wollen Interop tun ... haben Sie 3 Möglichkeiten:

1. die js aus der HTML-Datei
2. es als Teil Ihrer Zusammenstellung beim Aufbau Fügen
3. einbeziehen es als eine Bibliothek

Ich ermutige Sie zu versuchen (3); ist es nicht schwer, folgen Sie einfach den Schritten auf CLJSJS https://github.com/cljsjs/packages/wiki/Creating-Packages

Answer 2

Verwenden ClojureScript's compiler options die externen JS im Build enthält, dann Reagenz der Verwendung adapt-react-class die Komponente in Ihrer Reagenz Ansicht zu verwenden. Versuchen Sie nicht, sich auf Projekte wie CLJSJS zu verlassen.

Wenn Sie dies selbst tun, behalten Sie die Kontrolle über Ihr Projekt.

in project.clj

:foreign-libs [{:file "https://rawgit.com/felixrieseberg/React-Spreadsheet-Component/master/dist/spreadsheet.js" 
       :provides ["no-idea"]}] 

in den Ansichten

(def reactable-table (r/adapt-react-class js/Reactable.Table)) 

(defn example [] 
    [:div 
    [reactable-table 
    {:data (clj->js [ 
       {:name "Foo" :section 51} 
       {:name "Bar" :section 51}])}]]) 

Hinweis jedoch, dass diese Komponente Bündel viele Abhängigkeiten (jQuery). Sie könnten besser sein, indem Sie eine Komponente wie diese selbst in Clojurescript/Reagenz machen.