为什么Radium不能与Reagent(Clojurescript)一起使用？

Question

我试图用试剂项目/试剂·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]

• 因此,合并样式的矢量效果很好(那是镭特征).
• 媒体查询也可以,但仅在第一次渲染时,它在我更改屏幕大小时不会动态响应.
• :hover :focus :active 根本不起作用

我正在挖掘Radium代码以发现错误.好的迹象是Radium正确地为onMouseEnter onMouseLeave组件分配道具并将组件的: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会以某种方式阻止重新渲染吗？

Answer 1

我已经翻译了与试剂一起使用的基本按钮Radium示例:

(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),然后将其传递给Radium,然后将其转换回我在试剂中消耗的东西(使用adapt-react-class).

在我的例子中,hover作品.

希望这可以帮助.

我已将工作版本放在GitHub上.