如何在试剂中定义默认组件

Question

我正在尝试使用 Reagent 创建 SPA 应用程序。如何定义默认页面/组件？据我了解，我应该将当前页面保存在状态原子中。但是如果我在主页中更改状态，我无法定义它。 例如，在此代码中 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
            ....}

然后使用状态原子中的键名，即

(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 保持打开状态。有关 Clojure 的 var 功能的工作原理的更多详细信息，另请参阅 this answer。