Radium neden Reaktif (Clojurescript) ile çalışmıyor?

Question

reagent-project/reagent · GitHub ile FormidableLabs/radium · GitHub çalışmak için çalışıyordum, ama çıkmaz bir sona geldim.

Bunu kısmen "hacking" reaktif fonksiyonu create-class ile çalışarak halledebildim (Neredeyse orijinal ile aynı, js/Radium sarıcı ekledim).

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

Sonra bu

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

gibi bileşeni için işlevini yapılmış Ve işlemek diğer bazı reaktif bir yerde kullanmak fonksiyonu gibi: [radium/radium]

• Yani, birlikte stilleri vektör birleştirme eserleri iyi (Bu Radyum özelliği).
• Medya sorgusu da çalışıyor, ancak yalnızca ilk görüntüde, ekran boyutunu değiştirdiğimde dinamik olarak tepki vermiyor.
• :hover :focus :active Sorunun ne öğrendim için Radyum kodu kazdığı tüm

de çalışmıyor. Radium, bileşene doğru şekilde onMouseEnteronMouseLeave tanıtımı atar ve :hover bileşen durumu true olarak doğrudur.

Bu düzgün kovuluyor: https://github.com/FormidableLabs/radium/blob/master/modules/resolve-styles.js#L412

sorunu (Radyum ile değiştirildi) yeni devletin dayalı bileşeni yeniden işlemek gerekiyordu render fonksiyonu, hiç ateş olmamasıdır. Bu render işlevi: https://github.com/FormidableLabs/radium/blob/master/modules/enhancer.js#L22 JS Radyum örneklerini (Clojurescript ve Reaktif yok) çalıştırdığımda, bu işlevin işlevi her onMouseEnteronMouseLeave'da tetiklenir. Reaktif ile hiç de değil.

Bileşen durumu değiştiğinde Reaktif bir şekilde yeniden oluşturmayı engelliyor mu?

Answer 1

I Radyum Örnek reaktifi ile kullanılacak temel renkli çevirdikten:

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

önemli şey (reactify-component kullanarak) bir React bileşene button reaktif bileşeni dönüştürülmüş, daha sonra Radyum içinden geçti ve daha sonra reaktif içinde tükettiğim bir şeye geri dönüştürdüm (adapt-react-class kullanarak). Bu örnekte hover çalışır.

Bu yardımcı olur umarım.

Çalışma sürümünü GitHub'a yerleştirdim.