如何用点击事件改变试剂渲染后的状态(src )

Question

我们有感人笔录代码，但是当图像在单击缩略图时发生变化时，所选的图像需要用缩放器呈现。

我们开始单击缩略图，这将用选定的图像更改原子，并传递给缩放代码：

    (r/with-let [selected (r/atom (-> images first))]
        [:img.mx-auto.d-block.img-thumbnail {
          :src        thumbnail_small
          :on-click   #(reset! selected img)}]

        [:div.col-sm-10
              [zoomer selected]
         ]
        ]])

若要使用映像url挂载组件，请执行以下操作。当呈现component-did-mount (第一次)工作[:img {:src image时，传递图像zoomer [image]原始大小的url，但是当单击另一个图像时，原子会做出反应，但不会“重新复制”：

(defn zoomer [image]
   (let [!hammer-manager (atom nil)
         !zoom           (atom {:x 0 :y 0 :scale 1})
         !start-zoom     (atom {:x 0 :y 0 :scale 1})]

    (r/create-class
     {:component-did-mount
     (fn [this]
       (let [mc (new js/Hammer.Manager (r/dom-node this))]
       (println this.add)
       ;; Pinch
       (js-invoke mc "add" (new js/Hammer.Pinch))
       (js-invoke mc "on" "pinchstart" #(do (reset! !start-zoom @!zoom)
                                            (.preventDefault %)))
       (js-invoke mc "on" "pinchmove" #(let [{:keys [x y scale]} @!start-zoom]
                                        (reset! !zoom {:x     (+ x (.-deltaX %))
                                                       :y     (+ y (.-deltaY %))
                                                       :scale (* scale (.-scale %))})
                                        (.preventDefault %)))
       (reset! !hammer-manager mc)
      ))

   :reagent-render
   (fn [_]
     [:div.zoomer
      [:img {:src   image
             :style (transform @!zoom)}]])

   :component-will-unmount
   (fn [_]
     (when-let [mc @!hammer-manager]
       (js-invoke mc "destroy")))})))

我看到了带有G的这个示例使用状态JS组件。

Answer 1

我找到了解决办法。

1.-将:reagent-render改为:render。

2.-在:render中添加一个带有reagent/argv的let，以获取params。这将永远占用第二个[_ **image**]

 :render
 (fn [this]
   (let [[_ image] (r/argv this)]
     [:div.zoomer
      [:img {:src   image
             :style (transform @!zoom)}]]))

是可选的，在这里写一个param：(defn zoomer [image]。这是有效的，如果我们使用(defn zoomer []，它找到了r/argv。

这个例子帮助了我允许内部组件fns上的生命周期元数据和试剂法文件表格3。