0

所以我要做的是使用 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）

4

1 回答 1

1

感谢 reddit 上的 u/Galrog，我意识到为了让它工作，我需要创建一个 Form-2 组件（创建组件的 3 种形式http://reagent-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)]]]])))
于 2019-12-23T09:28:37.063 回答