Question

所以我想做的是使用re-com的horizontal-tabs元素的基本选项卡式视图。我添加了一个v-box元素，在其下方，我想拥有我的tabs元素以及与该标签相对应的主体。虽然在：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）

Answer 1

由于在reddit上使用了u / Galrog，我意识到，要使其正常工作，我需要创建一个Form-2组件（创建组件http://reagent-project.github.io/docs/master/CreatingReagentComponents.html#the-three-ways的3种形式）

将我的左面板组件更改为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)]]]])))

重启！在试剂原子上无法正常工作

1 个答案: