如何准备一个React.js组件，以便在ClojureScript中作为外部Reagent组件使用?

Question

我希望在ClojureScript应用程序中使用这个React.js组件作为外部Reagent组件：

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

然而，该组件在存储库中不可用：

http://cljsjs.github.io/。

如果React.js组件在目录中可用，则使用它与Reagent将像以下示例一样简单。

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

我想知道如何处理React电子表格组件，以便我可以以类似简单的方式使用它。如何准备一个React.js组件，使其作为外部Reagent组件在ClojureScript中使用？请提供清晰的食谱式描述。

注意：这个问题看起来和如何在Clojurescipt/Reagent中使用ReactJS组件相似，但并没有回答我的问题。

- nilo de roock

Answer 1

这里涉及到JavaScript互操作的方式问题，你有三种选择：

1. 从HTML文件中包含js 2. 编译时将其作为一部分构建 3. 将其作为库包含

我鼓励您尝试第三种方法；它并不困难，只需按照CLJSJS上的步骤进行即可：https://github.com/cljsjs/packages/wiki/Creating-Packages。

- Timothy Pratley

---

你是说三个选项都可以将其用作外部Reagent组件吗？我以为只有第三个选项才能实现。至于第三个选项，我看了那个描述，当然，我发现第四步非常困难。 - nilo de roock

对于第四步，您可以使用生成器，例如http://www.dotnetwise.com/Code/Externs/index.html，以便无需手动创建externs。 - Timothy Pratley

现在真的很有帮助！ - nilo de roock

Answer 2

使用{{link1：ClojureScript的编译器选项}}将外部JS包含在构建中，然后使用reagent的{{link2：adapt-react-class}}在reagent视图中使用组件。尽量不要依赖于CLJSJS等项目。

自己完成这个过程将使您掌控项目。

在project.clj中进行操作。

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

在视图中

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

请注意，此组件捆绑了许多依赖项（jQuery）。您最好自己使用clojurescript/reagent制作此类组件。

- skrat

---

这归结于创建一个 :externs 文件，对吧？问题是我不知道如何创建这样的文件。 - nilo de roock