Warum Radium nicht mit Reagenz (Clojurescript) funktioniert?

Question

Ich habe versucht, FormidableLabs/radium · GitHub mit reagent-project/reagent · GitHub arbeiten, aber ich bin zu einer Sackgasse gekommen.

Ich konnte es teilweise durch "hacken" Reagenzfunktion create-class so (es ist fast das gleiche wie Original, ich habe gerade js/Radium Wrapper).

(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)) 

Dann machte ich Funktion für die Komponente wie diese

(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"])})) 

Und ich benutze es irgendwo in einem anderen Reagenz machen Funktion wie: [radium/radium]

• So verschmelzen Vektor Stile zusammen Werke gut (das ist Radium-Funktion).
• Media Query funktioniert auch, aber nur beim ersten Rendern reagiert es nicht dynamisch, wenn ich die Bildschirmgröße ändere.
• :hover :focus :active funktioniert nicht bei allen

Ich war in Radium Code zu graben fand heraus, was los ist. Gutes Zeichen war, dass Radium onMouseEnteronMouseLeave Requisiten der Komponente richtig zuordnet und :hover den Zustand der Komponente auf true setzt.

Dies wird richtig gebrannt: https://github.com/FormidableLabs/radium/blob/master/modules/resolve-styles.js#L412

Das Problem ist, dass render Funktion, die Komponente wieder machen soll, auf der Grundlage neuer Zustand (geändert durch Radium) nicht überhaupt gebrannt. Diese render Funktion: https://github.com/FormidableLabs/radium/blob/master/modules/enhancer.js#L22 Während ich JS Radium Beispiele (keine Clojurescript und Reagenz) ausführen, wird diese Renderfunktion auf jedem onMouseEnteronMouseLeave ausgelöst. Mit Reagenz überhaupt nicht.

Blockiert Reagent das erneute Rendering, wenn sich der Komponentenstatus ändert?

Answer 1

ich die Grund Taste Radium Beispiel mit Reagenz verwendet werden übersetzt haben:

(def Radium js/Radium) 

(def styles {:base {:color "#fff" 
        ":hover" {:background "#0A8DFF"}} 
      :primary {:background "#0074D9"} 
      :warning {:background "#FF4136"}}) 

(defn button 
    [data] 
    (let [kind (keyword (:kind data))] 
    [:button 
    {:style (clj->js [(:base styles) 
         (kind styles)])} 
    (:children data)])) 

(def btn (Radium. (reagent/reactify-component button))) 

(def rbtn (reagent/adapt-react-class btn)) 

(defn hello-world 
    [] 
    [:div 
    [rbtn {:kind :primary} "Hello Primary"] 
    [rbtn {:kind :warning} "Hello Warning"]]) 

Das Wichtigste ist, dass ich button Reagenz-Komponente zu einem Reagieren Komponente (mit reactify-component) umgewandelt, ging es dann durch Radium und wandelte es dann in etwas um, das ich in Reagens konsumiere (unter Verwendung adapt-react-class).

In meinem Beispiel funktioniert .

Hoffe, das hilft.

Ich habe die Arbeitsversion auf GitHub gelegt.