CSS 和 Fulcro 的 ReaKit

Question

我在 Fulcro“2.6.0-RC8”中编写了一个小型实验性应用程序。如果你运行它你会看到小猫图片下面的文字 - "Description for the card" 是红色的。这很好 - 一切正常。然而，小猫图片下方的两个按钮应该不看起来一样，但除了文字之外看起来是一样的。 "Press primary" 按钮的文本应为白色，背景应为红色。我做错了什么？

(ns applets.reakit-test.core
  (:require [fulcro.client :as fc]
            [fulcro.incubator.ui.reakit :as rk]
            [fulcro.client.primitives :as prim :refer [defsc]]
            [fulcro-css.css-injection :as injection]
            [fulcro.client.dom :as dom]))

(def red "#FF0000")

(defsc PrimaryButton [_ {:keys [text]}]
  {:query         [:text]
   :initial-state (fn [p] {:text p})
   :css           [[:.primary
                    {:background-color red
                     :border           "none"
                     :color            "white"}]]}
  (rk/button :.primary text))
(def primary-button-ui (prim/factory PrimaryButton))

(defsc Experiment [_ {:keys [but-primary]}]
  {:query         [:but-primary (prim/get-query PrimaryButton)]
   :ident         (fn [] [:experiment/by-id :singleton])
   :initial-state {:but-primary (prim/get-initial-state PrimaryButton "Press primary")}
   :css           [[:.container
                    {:margin "10px"}]
                   [:.head
                    {:color       "#222"
                     :font-weight "bold"}]
                   [:.copy
                    {:color red}]]}
  (dom/div
    (rk/card :.container
             (rk/heading :.head {:as "h3"} "Card Heading")
             (rk/image {:src "https://placekitten.com/180/300" :alt "Kitten" :width 180 :height 300})
             (rk/paragraph :.copy "Description for the card")
             (rk/shadow))
    (dom/div
      (rk/button "Ordinary button")
      (primary-button-ui but-primary))))

(def experiment-ui (prim/factory Experiment))

(defsc ReakitTestRoot [this {:keys [application ui/react-key]}]
  {:query         [:ui/react-key {:application (prim/get-query Experiment)}]
   :initial-state (fn [_] {:application (prim/get-initial-state Experiment nil)
                           :ui/react-key "initial"})}
  (dom/div {:key react-key}
           (injection/style-element {:component this
                                     :react-key react-key})
           (experiment-ui application)))

(defonce app (atom nil))

(defn mount []
  (reset! app (fc/mount @app ReakitTestRoot "app")))

(defn ^:export init [_]
  (reset! app (fc/new-fulcro-client
                :reconciler-options {:render-mode :keyframe}))
  (mount))

Answer 1

您在组件 Experiment 中的查询是错误的。它应该是一个连接：[{:but-primary (prim/get-query PrimaryButton)}]

CSS 和 Fulcro 的 ReaKit

CSS and ReaKit from Fulcro

clojurescript

fulcro

reakit