使用 Shadow-CLJS 将 react-table 导入 ClojureScript

Question

这里是 Web 开发新手。我正在尝试将 NPM react-table 包与 ClojureScript/Reagent 项目一起使用。我无法正确导入包。我做了什么：

1/通过NPM安装了react-table，在我的项目目录下

2/在我的主命名空间中，我包含了 (:require ["react-table" :as rt])

在 REPL 中，我可以看到它正在建立一些联系，因为只需键入 rt 就会 return #js {:ReactTableDefaults #js {:data #js [], ...

我怎样才能真正创建一个 table？我试过

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

然后这实际上显示了一个table:

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

谢谢！

Answer 1

react-table 使用 "default" 导出，您可能没有在 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 中的翻译 table 可能是有用的参考。

使用 Shadow-CLJS 将 react-table 导入 ClojureScript

Import react-table into ClojureScript with Shadow-CLJS

clojurescript

reactjs

clojurescript-javascript-interop

shadow-cljs