重启！试剂原子不能按预期工作

Question

所以我想做的是使用 re-com 的水平制表符元素的基本选项卡式视图。我添加了一个 v-box 元素，在它下面我想要我的选项卡元素和对应于选项卡的正文。尽管在 :on-change 上我调用了 reset！在水平标签的模型上，它似乎不起作用。

(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）

Answer 1

感谢 u/Galrog 在 reddit 上，我意识到为了让它工作我需要创建一个 Form-2 组件（创建组件的 3 种形式 http://reagent-project.github.io/docs/master/CreatingReagentComponents.html#the-three-ways）

将我的左面板组件更改为 Form-2 组件会根据 atom 的更改重新呈现两个子组件

代码：

(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)]]]])))

重启！试剂原子不能按预期工作

reset! on reagent atom doesn't work as intended

clojurescript

reagent

re-frame