1

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

如何同时显示两个组件？

4

1 回答 1

2

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

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

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

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

于 2015-12-20T00:01:18.130 回答