如何在使用单击事件进行试剂渲染后更改状态(img 的 src)clojurescript 组件

Question

我们有感人的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")))})))

我看到了这个使用有状态JS组件与G Maps的例子。

Answer 1

我找到了解决方案。

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

2.- 在:render添加一个带有reagent/argv的let来获取参数。这永远需要第二个[_ **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。