如何在Reagent中定义默认组件

Question

我正在尝试使用Reagent创建SPA应用程序。如何定义默认页面/组件？据我所知，我应该在atom状态下保存当前页面。但是如果我在主页中改变状态，我就不能定义它。例如，在此代码中，无法解析home (第1行)：

(defonce app-state (atom {:current-page (home)}))

(defn second-page []
  [:p 2])

(defn home []
  [:div
   [:p 1]
   [:input {:type "button" :value "Click!"
            :on-click #(swap! app-state second-page)}]])

(defn hello-world []
  [:div
   [:input {:type "button" :value "Home" :on-click #(swap! app-state home)}]
   (:current-page @app-state)
   [:h3 "footer"]])

(reagent/render-component [hello-world]
                          (. js/document (getElementById "app")))

Answer 1

有几种方法可以解决这个问题。一种方法是创建一个名为pages的地图，如下所示

(def pages {:home home
            :second second-page
            ....}

然后在状态atom中使用键名，即

(defonce app-state (atom {:current-page :home})

因为您只是存储一个关键字，所以不需要前向延迟，因为关键字会自动求值。然后，在您的代码中，使用:current-page的值从页面映射中查找组件

defn hello-world []
  [:div
   [:input {:type "button" :value "Home" :on-click #(swap! app-state home)}]
   ((:current-page @app-state) pages)
   [:h3 "footer"]])

你可能还会发现像secretary这样的东西很有用，可以作为推广这类想法的一个例子。

Answer 2

只需使用declare将home和second-page的占位符放在原子之前：

(declare home second-page)

(defonce app-state (atom {:current-page home}))

确保始终保持浏览器选项卡对The Clojure CheatSheet处于打开状态。有关this answer的var特性工作原理的更多详细信息，请参阅Clojure。