使用Shadow-CLJS将反应表导入ClojureScript

时间:2019-10-06 12:28:55

标签: reactjs clojurescript clojurescript-javascript-interop shadow-cljs

此处是Web开发新手。我正在尝试将NPM react-table包与ClojureScript / Reagent项目一起使用。我无法正确导入软件包。我所做的:

1 /通过NPM安装了react-table,它在我的项目目录中

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"]

在“视图”命名空间中:(: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 个答案:

答案 0 :(得分:1)

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

docs中的翻译表可能是有用的参考。