Как изменить состояние (sr c из img) компонента clojurescript после рендеринга реагентов с событиями кликов - PullRequest
Новая
       68

Как изменить состояние (sr c из img) компонента clojurescript после рендеринга реагентов с событиями кликов

0 голосов
/ 17 февраля 2020

У нас есть трогательный код 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")))})))

Я видел этот пример Использование Stateful JS Компоненты с G Maps.

1 Ответ

1 голос
/ 18 февраля 2020

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

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 .

...