图像不会通过交换更新

Question

以下代码在屏幕底部显示 5 个不同的表情符号，在中上部显示 1 个表情符号。我试图做到这一点，以便在单击底部的其中一个表情符号时，相同的表情符号出现在顶部中央。我可以使用 :on-click 更新包含表情符号历史记录的原子，但图像不会更新为当前 url.

(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命名空间并使用这样的试剂原子：

(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 所需的最小更改，因此非常高效。

图像不会通过交换更新

Image Won't Update with Swap

clojure

clojurescript