перезагрузить! на атоме реагента не работает должным образом

Итак, что я пытаюсь сделать, это базовое представление с вкладками, используя элемент горизонтальных вкладок re-com. Я добавил элемент v-box, и ниже этого я хочу иметь элемент вкладок и тело, соответствующее вкладке. хотя на :on-change я вызываю сброс! на модели с горизонтальными вкладками и вроде не работает.

(defn left-panel []
  [re-com/box
   :size "auto"
   :child (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
                change-tab #(reset! selected-tab-id %)]
            [re-com/v-box
             :children [[re-com/horizontal-tabs
                         :model selected-tab-id
                         :tabs left-panel-tabs-definition
                         :on-change change-tab]
                        [(left-panel-tabs @selected-tab-id)]
                        ]])])

(defn forms-view []
  [:div "Forms View"])

(defn swagger-view []
  [:div "Swagger View"])

(def left-panel-tabs
  {::swagger #'swagger-view
   ::forms #'forms-view})

(def left-panel-tabs-definition
  [{:id ::forms
    :label "Forms"
    :say-this "Forms View"}
   {:id ::swagger
    :label "Swagger"
    :say-this "Swagger View"}])

Если вместо

[(left-panel-tabs @selected-tab-id)]

я делаю что-то вроде

(do (log @selected-tab-id) [(left-panel-tabs @selected-tab-id)])

он всегда будет печатать значение, которое я установил для своего атома реагента в начале (в данном случае ::forms)


clojurescript reagent re-frame
person Nikolas Pafitis    schedule 17.12.2019    source источник
comment
@selected-tab-id выполняется до того, как будет вызван ваш change-tab. Или, другими словами, вы устанавливаете его до вызова reset!. Если вы хотите, чтобы это изменилось, вам, вероятно, потребуется установить это в прослушивателе изменений (хотя я никогда раньше не использовал реагент).   -  person Carcigenicate    schedule 17.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Благодаря u/Galrog на Reddit я понял, что для того, чтобы это работало, мне нужно создать компонент Form-2 (3 формы создания компонента http://regent-project.github.io/docs/master/CreatingReagentComponents.html#the-three-ways )

Изменение моего компонента левой панели на компонент Form-2 повторно отображает обоих дочерних элементов при изменении атома.

Код:

(defn left-panel []
  (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
        change-tab #(reset! selected-tab-id %)]
    (fn []
      [re-com/box
       :size "auto"
       :child [re-com/v-box
               :children [[re-com/horizontal-tabs
                           :model selected-tab-id
                           :tabs left-panel-tabs-definition
                           :on-change change-tab]
                          [(left-panel-tabs u/selected-tab-id)]]]])))
person Nikolas Pafitis    schedule 23.12.2019