【问题标题】：In ClojureScript, how do I properly use cljsjs/react-mdl?在 ClojureScript 中，如何正确使用 cljsjs/react-mdl？
【发布时间】：2016-02-05 20:28:29
【问题描述】：

我真的一直在为 cljsjs 库而苦苦挣扎，我可能已经花了整整 2 天的时间来玩 react-bootstrap 的互操作，以及 clojurescript 中的各种 material 库。

基本上，我只是希望能够将 UI 组件添加到我的 ClojureScript 项目中。如果你能推荐比cljsjs/react-mdl 更好的东西，我会喜欢的。如果您知道如何帮助我解决当前的错误，我也很乐意！

我目前有：

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

(def Button (aget js/ReactMDL "Button"))

我得到了错误：

ReactMDL is not defined

在 javascript 控制台中。

我只想在屏幕上显示一个react-mdl 按钮。

我正在使用这个包装器： 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 和相关库构建一些项目，如果你能推荐我使用不同的堆栈，请这样做！

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

【问题讨论】：

我也遇到了问题，所以在我生活了一天之后，我回到了 Semantic UI，它似乎处于更高的级别，并且仅适用于构建 SPA。我注意到当我在 Slack 小组中询问时，既不推荐 MDL 也不推荐 Bootstrap。它们是：Foundation、Basscss、Semantic UI。
@ChrisMurphy 是的！这正是我需要的建议:) 是社区主要闲逛的闲散小组吗？您在 CLJ(S) 中使用了哪些库堆栈？（我很难找到将 cljs 集成到你提到的那 3 个框架/库的项目......）
re-com 是您可能会喜欢的基于 Reagent 的 UI 库，尤其是当您已经在使用 re-com 时。
@DanielCompton 我看了看，通过阅读自述文件，看起来他们强烈警告不要使用它，哈哈。您对它的稳定性和支持程度了解多少？
re-demo.s3-website-ap-southeast-2.amazonaws.com

标签： reactjs material-design clojurescript reagent

【解决方案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 Next 中：

(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 包装器中手动构建组件。

【讨论】：

【解决方案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（而不是 mdl）它在需要时作为反应组件管理生命周期。否则你只需要mdl（这完全没问题）。不过，对于一个简单的按钮来说可能并不重要。

【讨论】：

【解决方案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 文件和 Material 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")
  ,,,

cljsjs 包中提取非 JS 资产的其他方法在 project's wiki 中进行了描述。

【讨论】：