4

まず、このhttps://github.com/taylorSando/om-material-uiは最新の React/Material UI では動作しません。主な理由は、コンソールの次の警告だと思います。

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory

また、「手動で」コンポーネントを作成しようとしました:

(ns om-test.core
  (:require [om.core :as om :include-macros true]
            [om-tools.dom :as dom :include-macros true]
            [om-tools.core :refer-macros [defcomponent]]
            [om-material-ui.core :as mui :include-macros true]))

(enable-console-print!)

(defonce app-state (atom {:text "Hello Chestnut!"}))

(defn main []
  (om/root
    (fn [app owner]
      (reify
        om/IRender
        (render [_]
          (dom/div (dom/element js/MaterialUI.Paper {} "Hello")
                   (mui/paper {} "Hello"))
          )))
    app-state
    {:target (. js/document (getElementById "app"))}))

したがって、これらのアプローチは両方とも上記の同じ警告を生成します。

Reactには明らかにいくつかの変更がありました。次のようにプログラムでコンポーネントを作成することをお勧めします。

var React = require('react');
var MyComponent = React.createFactory(require('MyComponent'));

function render() {
  return MyComponent({ foo: 'bar' });
}

では、Om レンダリング関数内でマテリアル UI コンポーネントを作成するにはどうすればよいですか? 一般的に、Om レンダリング関数内で React コンポーネントを作成するにはどうすればよいでしょうか?

マテリアル UI とは、これを意味します https://github.com/calleall/material-ui

私の依存関係

:dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-3058" :scope "provided"]
                 [ring "1.3.2"]
                 [ring/ring-defaults "0.1.4"]
                 [compojure "1.3.2"]
                 [enlive "1.1.6"]
                 [org.omcljs/om "0.9.0"]
                 [environ "1.0.0"]
                 [http-kit "2.1.19"]
                 [prismatic/om-tools "0.3.11"]
                 [om-material-ui "0.1.1" :exclusions [org.clojure/clojurescript
                                                      org.clojure/clojure]]]
4

2 に答える 2

7

わかりました。

  1. https://github.com/taylorSando/om-material-ui/tree/master/build-muiを使用して、Material UI の最新バージョンをビルドします。注: 現在のバージョン (0.10.4) で CSS をビルドする必要はありません
  2. material.jsHTML ファイルに組み込みます。繰り返しますが、CSS を含める必要はありません。
  3. React を 2 回ロードしないようにするhttps://github.com/taylorSando/om-material-ui#avoid-loading-react-twice

Omのコードは次のとおりです。

(ns material-ui-test.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)

(defonce app-state (atom {:text "Hello Chestnut!"}))

(def ^:dynamic *mui-theme*
  (.getCurrentTheme (js/MaterialUI.Styles.ThemeManager.)))

(defn main []
  (om/root
    (fn [app owner]
      (reify
        om/IRender
        (render [_]
          (let [ctor (js/React.createFactory
                       (js/React.createClass
                         #js
                             {:getDisplayName    (fn [] "muiroot-context")
                              :childContextTypes #js {:muiTheme js/React.PropTypes.object}
                              :getChildContext   (fn [] #js {:muiTheme *mui-theme*})
                              :render            (fn []
                                                   (dom/div nil
                                                            (dom/h1 nil (:text app))
                                                            (js/React.createElement js/MaterialUI.Slider)))}))]
            (ctor. nil)))))
    app-state
    {:target (. js/document (getElementById "app"))}))

などを使わ(js/React.createElement js/MaterialUI.Slider)ずに使用:getChildContextすると、エラーがスローされます。

Uncaught TypeError: Cannot read property 'component' of undefined

これは、現在の MaterialUI の仕組みによるものです。ここで「使用法」の部分を読んでください：http://material-ui.com/#/customization/themes

Reagentのコードはもう少しエレガントです。しかし、私はここで名前空間を使用しました

[material-ui.core :as ui :include-macros true]

このサンプル プロジェクトからコピー アンド ペースト: https://github.com/tuhlmann/reagent-material

(def ^:dynamic *mui-theme*
  (.getCurrentTheme (js/MaterialUI.Styles.ThemeManager.)))

(defn main-panel []
  (let [active-panel (rf/subscribe [:active-panel])]
    (r/create-class
      {:display-name "Main Panel"

       :child-context-types
                     #js {:muiTheme js/React.PropTypes.object}

       :get-child-context
                     (fn [this]
                       #js {:muiTheme *mui-theme*})
       :reagent-render
                     (fn []
                       [ui/Slider {:name "slide1"}])})))

編集:ライブラリをリリースしました。これにより、プロセス全体が大幅に簡素化されます。

ライブラリ: https://github.com/madvas/cljs-react-material-ui

サンプルアプリ: https://github.com/madvas/cljs-react-material-ui-example

于 2015-08-13T06:41:18.043 に答える
0

Material UI は使用していませんがReact Widgetsを使用しています。om 用に作成する必要のあるラッパーは次のとおりです。

(defn dropdown-list
  [data owner {:keys [val-key menu-key id-key label-key props]}]
  (reify
    om/IRender
    (render [_]
      (let [menu (-get data menu-key)]
        (js/React.createElement js/ReactWidgets.DropdownList 
          (-> {:defaultValue (-> (find-by-key menu id-key (-get data     val-key))
                               (-get label-key)) 
               :data (mapv #(-get % label-key) menu)
               :onChange (fn [new-val]
                           (let [new-id (-> (find-by-key menu label-    key new-val)
                                          (-get id-key))]
                             (om/update! data val-key new-id)))}
            (merge props)
            clj->js))))))

したがって、一般的には、React クラス ( ) を取得して、 props を に渡しながらjs/ReactWidgets.DropdownList呼び出す必要があります。js/Readt.createElementrender

于 2015-07-28T14:00:31.343 に答える