Как изменить состояние (src of img) компонента clojurescript после рендеринга реагента с помощью событий щелчка

У нас есть код touching 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-адресом изображения. Передает url исходного размера изображения zoomer [image] при рендеринге component-did-mount (первый раз) работает [: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-картами.


clojurescript reagent re-frame
person Diego Peñalver Montero    schedule 17.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение.

1.- Измените :reagent-render на :render.

2.- В :render добавьте let с reagent/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.

person Diego Peñalver Montero    schedule 18.02.2020