时间戳

首页 > 解决方案 > 如何在带有点击事件的试剂渲染后更改状态（img 的 src）clojurescript 组件

clojurescript - 如何在带有点击事件的试剂渲染后更改状态（img 的 src）clojurescript 组件

问题描述

我们有感人的 clojurescript代码，但是当单击缩略图时图像发生变化时，所选图像需要使用缩放器进行渲染。

我们开始点击缩略图，这会改变所选图像的原子，并传递给缩放器代码：

    (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 安装组件。zoomer [image]渲染组件安装时（第一次）工作时传递图像原始大小的 url [:img {:src image，但是当单击另一个图像时，原子会做出反应但不会“重新渲染”：

(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 Maps 的有状态 JS 组件的例子。

标签： clojurescriptreagentre-frame

解决方案

我找到了解决方案。

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

2.-:render添加一个letwithreagent/argv来获取参数。这永远是第二个[_ **image**]：

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

在此处编写参数是可选的：(defn zoomer [image]. (defn zoomer []如果我们使用r/argv它找到参数，这将起作用。

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

推荐阅读