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

Question

我真的一直在与 cljsjs 库作斗争，我可能花了整整 2 天的时间来玩 react-bootstrap 的互操作和各种 material clojurescript 中的库。

基本上，我只想能够将 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, and reframe。老实说，我只是想得到一些用 Clojure 和相关库构建的项目，如果你能推荐我使用不同的堆栈，请做！

我是不是忽略了一些简单的东西？

Answer 1

我只会回答让按钮启动。

我没有使用任何 cljs 库。我只是使用了提供的 css 和 js。它们需要在您的标记中，以及 link 到 Material 设计图标库。

这是试剂中的例子：

[: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 通过全局范围公开对象，例如参见 [=18=]

注意：你可以只对某些对象使用css，比如@Chris Murphy的回答，但是重点react-mdl（而不是 mdl），它可以在需要时作为 React 组件管理生命周期。否则你只需要 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 文件和 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.

中进行了描述

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

In ClojureScript, how do I properly use cljsjs/react-mdl?

reactjs

material-design

clojurescript

reagent

客户端应用代码

服务器应用代码