0

我的 Reagent 组件是一个简单的 div，它有一个component-did-mount和一个component-did-update钩子。它使用 vexflow 绘制笔记。

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn [this]
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (draw-system-with-chord notes))}))

它是这样使用的。

(defn exercise-one []
  (let [note (re-frame/subscribe [:exercise-one/note])]
    [:div
     [note-bar/note-bar @note]
     [other]
     [components]]))

我的事件代码如下。

(defn store-exercise-one-note [db [_ note]]
  (assoc-in db [:exercise-one :note-bar :note] note))

(re-frame/reg-event-db
  :exercise-one/store-note
  store-exercise-one-note)

(defn query-exercise-one-note [db]
  (or (get-in db [:exercise-one :note-bar :note])
      [{:octave 4 :key :c}]))

(re-frame/reg-sub
  :exercise-one/note
  query-exercise-one-note)

我验证了 app-db 值使用 10 倍变化。然而，当热重载启动时，注释栏只显示不同的注释。我相信这是由于component-did-update未调用挂钩。

我的问题是，这是绑定呈现某些内容的 JavaScript 库的正确方法吗？如果是这样，为什么我的组件没有更新？

4

1 回答 1

0

以下修复了组件。在此处查看有关 form-3 组件的文档

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn []
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (let [new-notes (rest (reagent/argv this))]
                               (apply draw-system-with-chord new-notes)))}))
于 2020-05-26T06:39:33.560 回答