Come preparare un componente React.js per l'utilizzo in ClojureScript come componente Reagent esterno?

Question

Vorrei utilizzare questo componente React.js come componente Reagent esterno in un'applicazione ClojureScript:

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

questo componente non è comunque disponibile nel repository:

http://cljsjs.github.io/.

Se un componente React.js è disponibile nella directory, utilizzarlo con Reagent sarebbe semplice come nell'esempio seguente.

(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} 
       ])} 
    ] 
    ] 
) 

Mi piacerebbe sapere che cosa avrei dovuto fare con la componente React foglio di calcolo in modo tale che posso usarlo in modo semplice simile. Come preparare un componente React.js per l'utilizzo in ClojureScript come componente Reagent esterno? Si prega di fornire un chiaro tipo di descrizione della ricetta.

Nota: questa domanda How to use a ReactJS Component with Clojurescipt/Reagent sembra simile ma non risponde alla mia domanda.

Answer 1

Si riduce a come si vuole fare di interoperabilità JavaScript ... avete 3 scelte:

1. includere il js dal file HTML
2. costruirlo come parte della compilation
3. Includere come una biblioteca

Ti incoraggio a provare (3); non è difficile, basta seguire le istruzioni sul CLJSJS https://github.com/cljsjs/packages/wiki/Creating-Packages

Answer 2

Usa ClojureScript's compiler options per includere i JS esterni nel costruire, quindi utilizzare il reagente di adapt-react-class di utilizzare il componente in vostro punto di vista dei reagenti. Cerca di non dipendere da progetti come CLJSJS.

Fare questo tu stesso ti terrà in controllo del tuo progetto.

in project.clj

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

nelle viste

(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}])}]]) 

noti comunque che questo fasci componenti sacco di dipendenze (jQuery). Potrebbe essere meglio fare un componente come questo te stesso, in clojurescript/reagent.