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

Question

我真的一直在和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的試劑 ，並重新構建，如果重要的話。 老實說，我只是想用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時間點（而不是mdl ）可以在需要時作為反應組件來管理生命周期。 否則你只需要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")
  ,,,

在項目的wiki中描述了從cljsjs包中提取非JS資產的其他方法。