clojurescript - 渲染试剂/重构中的两个组件

Question

我有一些代码：

(defn second-panel []
    [:div
     [:h1 "Hello "]
     ])

(defn root-container []
  (second-panel)
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     [:h1 "Hello from " @name]
     ]))

但只有root-container组件呈现。为什么我的second-panel函数不渲染？非常感谢。

Answer 1

您必须添加(second-panel)到您的 div 中。的返回值(second-panel)当前被忽略。

(defn root-container []
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     (second-panel)
     [:h1 "Hello from " @name]
     ]))

Answer 2

从函数返回多个虚拟 DOM 元素而不将它们包装在容器元素中的正确解决方案是使用Fragment。这reagent是由:<>特殊关键字处理的。

(defn second-panel []
  [:div
   [:h1 "Hello "]])

(defn root-container []
  (let [name (re-frame/subscribe [::subs/name])]
    [:<>
     [second-panel]
     [:div
      [:h1 "Hello from " @name]
      ]]))

;; or, with the nested let. both variants are fine.

(defn root-container []
  [:<>
   [second-panel]
   (let [name (re-frame/subscribe [::subs/name])]
     [:div
      [:h1 "Hello from " @name]
      ])])

还有一个不同的 in(second-panel)和[second-panel]since(second-panel)将实际直接调用该函数，这意味着它不会像常规的试剂函数那样表现，而是成为调用者的一部分。您应该更喜欢[second-panel]所有“组件”类型函数的表示法。