试剂渲染多组分答案

【问题标题】：reagent render multiple components试剂渲染多组分
【发布时间】：2015-12-20 08:01:18
【问题描述】：

我有两个试剂组件，它们将显示在我的 Web 应用程序的不同页面上。经过单独测试，它们都完全按照应有的方式工作。当我尝试渲染它们时，只显示一个。

这里是clojurescript：

(defn mount-components []
  (r/render [#'password-component] (.getElementById js/document "password"))
  (r/render [#'test-component] (.getElementById js/document "test")))

(defn init! []
  (mount-components))

在后端我有这个：

(defn password-page []
  (layout/base
   [:h1 "Change your password"]
   [:div#password]))

(defn home-page []
  (layout/base
   [:h1 "Hello!"]
   [:div#test]))

(defroutes app-routes
  (GET "/" [] home-page)
  (get "/password" [] password-page))

编译 clojurescript 并查看页面后，仅显示密码组件。如果我在mount-components 函数中交换顺序，使test-component 排在第一位，则只显示test-component 而不是password-component。

如何同时显示两个组件？

【问题讨论】：

Here 是您尝试做的事情的一个例子，它可能有效......它在试剂中。也许每个人都在 reagent.session 中是必需的。

标签： clojurescript reagent

【解决方案1】：

我认为问题可能是您的实现中的一种设计缺陷。在反应程序中，状态原子的变化将触发重新渲染。从提供的代码中，不清楚会导致重新渲染发生的“触发器”是什么。实际查看完整页面代码以了解您如何调用 javascript 可能会有所帮助 - 它可能只是 init 仅在第一页加载时运行，而不是针对每个页面运行。可能发生的是

您访问了第一页。调用 mount-components 函数后，它只会为您的组件找到一个 div 元素目标，因此您只会看到一个渲染的组件。
您访问了第二页。现在您有一个带有第二个 div 元素的页面，但问题是您的本地状态中没有任何内容发生更改以触发组件的重新渲染，因此您看不到第二个组件。基本上，需要告诉试剂/反应您需要重新渲染组件。

使用试剂，如果您将客户端实现为单页应用程序 (SPA)，我认为效果会更好。您使用试剂原子来存储您的应用程序状态并使用该原子中的值来确定/控制在页面上呈现组件的内容/时间。返回服务器的调用主要用于来回传递数据而不是页面 html（大体简化并忽略了客户端渲染之类的事情）。

如果您真的想按照自己的方式进行操作，您可能需要将渲染命令放在不同的函数中，然后在每个页面中使用不同的 javascript 调用，这些调用将调用相应的“运行”函数来渲染组件。或者，您可以将组件链接到某种状态标志，该标志在加载新页面时更新，以便在新页面到达时重新运行 mount-components 函数。

【讨论】：