cljsjs/react-day-picker 的 Clojurescript 日期时间选择器

Question

我是 clojure 和 clojurescript 的新手。我只是想知道如何在 clojurescript.

中实现这个库

这是link到图书馆的：https://react-day-picker.js.org/examples/basic

我已经以我的名义 space 需要图书馆，就像这样：

(ns woot (:require [cljsjs.react-day-picker]))

但我不知道如何从这里开始

当我尝试

(js/react-day-picker)

我收到这个错误

#object[ReferenceError ReferenceError: react_day_picker is not defined]
 (<NO_SOURCE_FILE>)

Answer 1

CLJSJS 通过提供一个 externs 文件 来工作，这样 ClojureScript 编译器就可以避免在执行优化时弄乱名称。如果您在 Github 中查看文件 react-day-picker.ext.js 的末尾，您会注意到它在全局范围内导出名称 DayPicker，因此您可能想要执行类似 (js/DayPicker.) 创建 DayPicker.

的新实例

话虽如此，我建议您研究 Shadow-CLJS because the integration with the NPM ecosystem will be much more familiar. I have this repo with a small demo of react-intl 应该很容易替换一些位并让基本的 react-day-picker 示例工作。

编辑：我试了一下：

克隆我的 cljs-react-intl 存储库
使用 npm 安装 react-day-picker：yarn install react-day-picker
编辑文件 assets/index.html 以包含所需的样式表：

   <head>
     <title>minimal react-intl example</title>
     <meta charset="UTF-8">
     <!- ADD THE FOLLOWING -->
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/react-day-picker@7.4.0/lib/style.css">
   </head>

更新 main.cljs 文件以调用日期选择器类:

(ns app.main
  (:require ["react-day-picker" :as dp]
            [reagent.core :as r]))

;; App

(defn example-app []
  [:p
   [:div "Here is a day picker:"]
   [:> dp/DayPicker]
   ])

;; App initialization

(defn mount-root []
  (r/render [example-app] (.getElementById js/document "app")))

(defn main! []
  (mount-root)
  (println "[core]: loading"))

(defn reload! []
  (mount-root)
  (println "[core] reloaded"))

以开发模式启动应用程序：

yarn run html
yarn shadow-cljs watch app

截图：

cljsjs/react-day-picker 的 Clojurescript 日期时间选择器

Clojurescript date timepicker with cljsjs/react-day-picker

clojurescript

react-day-picker

clojurescript-javascript-interop