2

I've written a small experimental application in Fulcro "2.6.0-RC8". If you run it you will see that the writing underneath the picture of the kitten - "Description for the card" is red. This is good - things are working. However the two buttons below the picture of the kitten should not look the same, but look identical apart from the text. The "Press primary" button should have its text in white and its background should be red. What am I doing wrong?

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

Unfortunately the two buttons at the bottom look the same

4

1 回答 1

2

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

于 2018-08-19T09:05:43.133 回答