Question

以下代码在屏幕底部显示5个不同的表情符号，在上部中心显示1个表情符号。我试图这样做，以便当点击底部的一个表情符号时，同样的表情符号出现在顶部中心。我能够使用以下方法更新包含表情符号历史记录的原子：点击，但图像不会使用当前网址更新。

(def emoji-history
    (atom {:current "img/sad-tears.png"}))

(defn Img40 [src reaction]
 [:img {:src src
        :style {:width "60px"
                :padding-right "20px"}
        :on-click #(do
                    (js/console.log (get @emoji-history :current))
                    (swap! emoji-history assoc :current src)
                    (js/console.log (get @emoji-history :current)))}])

(defn CurrentEmoji []
          [:img {:style {:width 40 :margin-top 15}
                 :src (get @emoji-history :current)}])

(defn EmojiDisplay []
    [:div {:style {:text-align "center"}}
     [CurrentEmoji]
     [:div {:style {:text-align "center"
                    :margin-top "200px"
                    :padding-left "20px"}}
      [Img40 "img/smile.png" "happy"]
      [Img40 "img/sad-tears.png" "sad"]
      [Img40 "img/happy-tears.png" "amused"]
      [Img40 "img/surprised.png" "surprised"]
      [Img40 "img/angry.png" "angry"]]])

Answer 1

请参阅reagent.core命名空间并使用如下的Reagent原子：

(ns my-name.space.etc
  (:require [reagent.core :as r]))

(def emoji-history
  (r/atom {:current "img/sad-tears.png"}))

你在这里的代码行......

(swap! emoji-history assoc :current src)

...你swap!原子的价值，这是正确的： - ）

与普通的旧Clojure原子不同，当Reagent原子的值（状态）发生变化时，会触发UI的重新渲染。

但很少会重新渲染整个UI。因为Reagent包装React，所以React系统会计算出对DOM所需的最小更改，因此它非常有效。

图像不会通过交换更新

1 个答案: