reactjs - 如何准备 React.js 组件以在 ClojureScript 中用作外部 Reagent 组件？

Question

我想将此 React.js 组件用作 ClojureScript 应用程序中的外部 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 组件以在 ClojureScript 中用作外部 Reagent 组件？请提供清晰的配方类型描述。

注意：这个问题How to use a ReactJS Component with Clojurescipt/Reagent看起来很相似，但没有回答我的问题。

Answer 1

它归结为您希望如何进行 JavaScript 互操作......您有 3 个选择：

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

我鼓励你尝试（3）；这并不难，只需按照 CLJSJS 上的步骤https://github.com/cljsjs/packages/wiki/Creating-Packages

Answer 2

使用ClojureScript 的编译器选项将外部 JS 包含在构建中，然后使用试剂adapt-react-class在试剂视图中使用组件。尽量不要依赖像 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 中自己制作这样的组件可能会更好。