8

Reagent -project/reagent · GitHubでFormidableLabs/radium · GitHubを動かそうとしたのですが、行き詰まってしまいました。

このように試薬機能を「ハッキング」することで部分的に動作させることができましたcreate-class（オリジナルとほぼ同じですが、js/Radiumラッパーを追加しただけです）。

(ns myproject.components.radium
  (:require [reagent.core :as r]
            [reagent.impl.component :as c]
            [reagent.impl.util :as util]
            [reagent.interop :refer-macros [.' .!]]))

(defn create-class
  [body]
  (assert (map? body))
  (let [
        spec (c/cljsify body)
        res (js/Radium (.' js/React createClass spec))
        ;res (.' js/React createClass spec)
        f (fn [& args]
            (r/as-element (apply vector res args)))]
    (util/cache-react-class f res)
    (util/cache-react-class res res)
    f))

次に、このようなコンポーネントの関数を作成しました

(defn radium []
  (create-class
    {:reagent-render
     (fn []
       [:button {:style
                 [{:backgroundColor             "red"
                   :width                       500
                   :height                      100
                   "@media (min-width: 200px)" {:backgroundColor "blue"}
                   ":hover"                     {:backgroundColor "green"}}
                  {:height 200}]}
        "Heres something"])}))

そして、次のような他の試薬レンダリング関数のどこかで使用します。[radium/radium]

  • したがって、スタイルのベクトルを一緒にマージすることはうまく機能します (これが Radium 機能です)。
  • メディア クエリも機能しますが、最初のレンダリングでのみ、画面サイズを変更しても動的に反応しません。
  • :hover :focus :activeまったく機能しません

何が問題なのかを知るために、私は Radium コードを掘り下げていました。onMouseEnter onMouseLeaveRadium が適切に props をコンポーネントに割り当て、コンポーネントの:hover状態を true に設定することは良い兆候です。

これは適切に起動されます: https://github.com/FormidableLabs/radium/blob/master/modules/resolve-styles.js#L412

問題は、render新しい状態 (Radium によって変更された) に基づいてコンポーネントを再レンダリングすると想定される関数がまったく起動されないことです。このrender関数: https://github.com/FormidableLabs/radium/blob/master/modules/enhancer.js#L22 一方、JS Radium の例 (Clojurescript と Reagent なし) を実行すると、このレンダリング関数はすべてのonMouseEnter onMouseLeave. 試薬ではまったくありません。

コンポーネントの状態が変化すると、Reagent は何らかの方法で再レンダリングをブロックしますか?

4

1 に答える 1