如何准备 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 个选择：

包括来自您的 HTML 文件的 js
将其构建为编译的一部分
将其作为库包含

我鼓励你尝试 (3)；这并不难，只需按照 CLJSJS https://github.com/cljsjs/packages/wiki/Creating-Packages

上的步骤操作即可

Answer 2

使用 ClojureScript's compiler options to include the external JS in the build, then use reagent's 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.

中，您自己制作这样的组件可能会更好

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

How to prepare a React.js component for usage in ClojureScript as an external Reagent component?

clojurescript

reactjs

reagent