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

(second-panel)和[second-panel]也有所不同，因为(second-panel)实际上将直接调用该函数，这意味着它的行为不会像常规的试剂函数，而是成为调用者的一部分。对于所有“组件”类型的函数，您都应该首选[second-panel]表示法。

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

2 个答案: