Почему Radium не работает с реагентом (Clojurescript)?

Question

Я пытался получить работу FormidableLabs/radium · GitHub с reagent-project/reagent · 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 правильно назначает onMouseEnteronMouseLeave реквизит для компонента и устанавливает :hover состояние компонента в true.

Это получает правильно уволили: https://github.com/FormidableLabs/radium/blob/master/modules/resolve-styles.js#L412

Проблема заключается в том, что render функция, которая, как предполагается повторно вынести компонент на основе нового состояния (измененной радия) не обжигают при всех. Эта функция render: https://github.com/FormidableLabs/radium/blob/master/modules/enhancer.js#L22 Принимая во внимание, что при запуске примеров JS Radium (без Clojurescript и Reagent) эта функция рендеринга срабатывает каждые . С реагентом совсем нет.

Реагент каким-то образом блокирует повторный рендеринг при изменении состояния компонента?

Answer 1

Я перевел основную кнопку Радий пример, который будет использоваться с реактивом:

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

Главное, что я преобразовал button компонент реагента к React компонента (с использованием reactify-component), затем пропускают через Радий а затем преобразовали его обратно в то, что я потребляю в реагенте (используя adapt-react-class).

В моем примере hover работает.

Надеюсь, это поможет.

Я разместил рабочую версию на GitHub.