Question

我有两个试剂组件将显示在我的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。

如何同时显示两个组件？

Answer 1

我认为问题可能是您实施中的一种设计缺陷。在反应程序中，状态原子的变化将触发重新渲染。从提供的代码中，不清楚“触发器”是什么导致重新渲染发生。它可能会实际看到整个页面代码，看看你如何调用javascript - 它可能只是init只在第一页加载而不是每页都运行。可能发生的事情是

您访问第一页。调用mount-components函数并仅查找组件的div元素目标之一，因此您只能看到一个呈现的组件。
您访问第二页。现在你有一个带有第二个div元素的页面，但问题是你的本地状态没有改变，触发了组件的重新渲染，所以你没有看到第二个组件。基本上，某些东西需要告诉您需要重新渲染组件的试剂/反应。

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

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

试剂呈现多种成分

1 个答案: