Импортировать таблицу реакции в ClojureScript с помощью Shadow-CLJS - PullRequest
Новая
       35

Импортировать таблицу реакции в ClojureScript с помощью Shadow-CLJS

0 голосов
/ 06 октября 2019

Новичок веб-разработки здесь. Я пытаюсь использовать пакет реактивной таблицы NPM с проектом ClojureScript / Reagent. Я не могу правильно импортировать пакет. Что я сделал:

1 / установил реактивную таблицу через NPM, она находится в каталоге моего проекта

2 / в моем основном пространстве имен, я включил (:require ["react-table" :as rt])

В REPL я вижу, что он устанавливает какое-то соединение, просто набрав rt вернет #js {:ReactTableDefaults #js {:data #js [], ...

Как я могу на самом деле создать таблицу? Я пробовал такие вещи, как

rt/ReactTable {:data [{:a 1 :b 2} {:a 3 :b 4} {:a 6 :b 8}] :columns [{:Header "a" :accessor "a"} {:Header "b" :accessor "b"}]}, но продолжаю нажимать на TypeError: module$node_modules$react_table$lib$index.ReactTable is not a function

Я также прочитал https://code.thheller.com/blog/shadow-cljs/2017/11/10/js-dependencies-in-practice.html, но это не помогло мне достаточно.

Обновление - используя figwheel, я что-то получаю, и это то, что я хотел бы воспроизвести в shadow-cljs:

В project.clj: [cljsjs/react-table "6.8.6-0"]

В пространстве имен "view": (:require [cljsjs.react-table] [reagent.core :as r])

Тогда это фактически отображает таблицу: 

(def ReactTable (r/adapt-react-class (aget js/ReactTable "default")))
(defn test-table []
  [:div {:style {:width 320}}
  [ReactTable {:data    [{:a 1 :b 2} {:a 3 :b 6} {:a 6 :b 8}]
               :columns [
                     {:Header "a" :accessor "a" :width 200}
                     {:Header "b" :accessor "b" :width 100}]
           :showPagination false
           :defaultPageSize 3}]])

(defn main-panel []
  [test-table])

Спасибо!

1 Ответ

1 голос
/ 06 октября 2019

react-table использует экспорт "по умолчанию", который вы, вероятно, не использовали в сборке shadow-cljs, но вроде как в варианте cljsjs (т. Е. (aget js/ReactTable "default")).

Так что правильныйспособ сделать это: 

(ns your.app
  (:require ["react-table" :as rt :default ReactTable]))

(defn test-table []
  [:div {:style {:width 320}}
    [:> ReactTable {:data ... :columns ...}]])

Таблица перевода в документах может быть полезной ссылкой.

...