图像不会更新，换换

以下代码在屏幕底部显示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"]]])

来源

2017-04-05 Jessie Richardson

你使用的是试剂吗？应该不是/ r是一个'原子' - 为什么你会期望一个clojure原子的更新来触发任何事情？ - 根据您提供的代码。 – birdspider

因为我正在通过以下方式更新图像源：点击。是的，使用试剂。尽管如此，并不是每个人都熟悉发生了什么。 –

参考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 ato m，当Reagent原子的值（状态）改变时，UI的重新呈现被触发。

尽管如此，很少重新渲染整个UI。由于Reagent包装了React，因此React系统可以解决DOM所需的最少的更改，所以它非常高效。

来源

2017-04-05 19:15:47 Scott

OMG非常感谢你。我不知道我忘记了需要试剂。：P –

图像不会更新，换换

回答

相关问题