客户端应用代码

Question

我真的在与cljsjs图书馆挣扎，我可能花了整整2天的时间来玩react-bootstrap和{{1} {{1} clojurescript中的库。

基本上，我只是希望能够将UI组件放入我的ClojureScript项目中。如果你能推荐比material更好的东西，我会喜欢它。如果你知道如何帮助解决我目前的错误，我也会喜欢它！

我目前有：

cljsjs/react-mdl

我收到错误：

(ns project.views (:require [cljsjs.react-mdl])) (def Button (aget js/ReactMDL "Button"))

在javascript控制台中。

我只想在屏幕上显示一个ReactMDL is not defined按钮。

我正在使用这个包装器： https://github.com/cljsjs/packages/tree/master/react-mdl

对于这个图书馆： https://github.com/tleunen/react-mdl

关于cljsjs的这些互操作说明：https://github.com/cljsjs/packages/wiki/Using-Packages

如果重要的话，我还会使用clojure的reagent和reframe。老实说，我只是想用Clojure和相关的库建立一个项目，如果你能推荐我使用不同的堆栈，请做！

我只是忽略了一些简单的事情吗？

Answer 1

我只是回答按钮。

我没有使用任何cljs库。我刚刚使用了提供的css和js。它们需要在您的标记中，以及指向Material Design图标库的链接。

这是Reagent的例子：

[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:value "ok"}]

这是Om下一个：

(defui MDSubmitButton
  Object
  (render [this]
    (dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"})
                (dom/i (clj->js {:className "material-icons"}) "add"))))
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id}))

我对这一切都很陌生，但我的偏好是只使用css，将Javascript保持在最低限度，然后在项目正在使用的任何React包装器中手动构建组件。

Answer 2

应该像这样使用：

(js/MaterialCheckbox element)
(js/MaterialDataTable ...)
;; and so on

您仍然需要require才能导入js和css文件（这就是它真正做到的所有文件）。它最初也让我失望（当我为cljsjs打包时）。

这是因为react-mdl通过全局范围公开对象，例如参见https://github.com/tleunen/react-mdl/blob/master/extra/material.js#L701

注意：你可以只使用css来处理某些对象，比如@Chris Murphy的回答，但要点react-mdl（而不是{{1}它作为反应组件在需要时管理生命周期。否则你只需要mdl（完全没问题）。然而，对于一个简单的按钮可能无关紧要。

Answer 3

这就是我react-mdl与Reagent合作的方式。

客户端应用代码

需要project.clj中的包：

[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.3.1-0"]
[cljsjs/react-mdl "1.5.4-0"]

需要命名空间：

(ns ,,,
 (:require  ,,,
            [cljsjs.react-mdl]))

为您将使用的组件创建帮助程序：

(def Button (.-Button js/ReactMDL))
(def Slider (.-Slider js/ReactMDL))
,,,

现在可以在Reagent次观看中使用它们：

[:> Button "Hello!"]
[:> Slider {:min 0 :max 10}]

服务器应用代码

react-mdl CSS文件和材质UI图标应包含在HTML中。

CSS文件嵌入在cljsjs/react-mdl包中。为了提取它，我使用了ring-cljsjs中间件：

; Add dependencies to project.clj
[ring-cljsjs "0.1.0"]
[cljsjs/react-mdl "1.5.4-0"]

; Apply middleware to the Ring handler
(ns app.handler
  (:require ,,,
            [ring.middleware.cljsjs :refer [wrap-cljsjs]]))
,,, 
(-> ,,,
   wrap-cljsjs)

; Add link to CSS into Hiccup template for the served HTML file
(ns ,,,
  (:require ,,,
            [hiccup.page :as h]))
,,,
[:head
  [:meta {:charset "UTF-8"}]
  [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]

  (h/include-css "/cljsjs/react-mdl/material.min.css")
  ,,,

project's wiki中描述了从cljsjs包中提取非JS资产的其他方式。

在ClojureScript中，如何正确使用cljsjs / react-mdl？

3 个答案:

客户端应用代码

服务器应用代码