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

本文介绍了使用cljsjs/react-day-picker的Clojurescript日期时间选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是clojure和clojurescript的新手.我只是想知道如何在clojurescript中实现该库.

I am new to clojure and clojurescript. I just to know how I can implement this library in clojurescript.

这是库的链接: https://react-day-picker .js.org/examples/basic

我已经需要在我的名称空间中添加库，例如:

I have required the library in my name space like so :

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

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

But I do not know how to proceed from here

当我尝试

(js/react-day-picker)

我收到此错误

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

推荐答案

CLJSJS的工作方式是提供一个 externs文件，该文件可被使用，以便ClojureScript编译器避免在执行优化时弄乱名称.如果您查看文件的末尾 react-day-picker.ext.js ，您会注意到它在全局范围内导出了名称DayPicker，因此您可能想要做类似(js/DayPicker.)的操作来创建DayPicker的新实例.

CLJSJS works by providing an externs file which is used so that the ClojureScript compiler avoids messing up the names when performing optimizations. If you look at the end of the file react-day-picker.ext.js in Github, you'll notice that it exports the name DayPicker in the global scope, so you probably want to do something like (js/DayPicker.) to create a new instance of DayPicker.

话虽如此，我建议您研究影子CLJS ，因为它与NPM生态系统集成会更加熟悉.我有此回购协议带有一个react-intl的小演示，它应该很容易替换几下，并使基本的react-day-picker示例正常工作.

That being said, I'd recommend you looking into 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 and it should be easy to replace a few bits and have the basic react-day-picker example working.

编辑:我尝试过:

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

Clone my cljs-react-intl repo
Install react-day-picker with npm: yarn install react-day-picker
Edit the file assets/index.html to include the required stylesheet:

   <head>
     <title>minimal react-intl example</title>
     <meta charset="UTF-8">
     <!- ADD THE FOLLOWING -->
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/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日期时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！