4

我真的一直在为cljsjs库而苦苦挣扎，我可能已经花了整整 2 天的时间来玩 clojurescript 中的互操作react-bootstrap和各种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's reagent和reframe，如果这很重要的话。老实说，我只是想用 Clojure 和相关库构建一些项目，如果你能推荐我使用不同的堆栈，请这样做！

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

4

3 回答 3

2

我会回答让按钮启动。

我没有使用任何 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 包装器中手动构建组件。

于 2016-02-05T20:58:08.767 回答
1

这就是我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-mdlCSS 文件和 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 资产的其他方法在项目的 wiki中进行了描述。

于 2016-12-30T11:19:48.477 回答
1

它应该这样使用：

(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（这完全没问题）。不过，对于一个简单的按钮可能并不重要。

于 2016-02-05T23:06:57.240 回答