試劑渲染多個組件

我有兩個試劑組件，它們將顯示在我的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。

如何在同一時間顯示兩個組件？

來源

2015-12-18 dan

[這裏]（https://github.com/luminus-framework/luminus-template/blob/master/src/leiningen/new/luminus/cljs/src/cljs/core.cljs）就是一個例子你試圖這樣做大概是有效的......它在試劑中。也許每個人都需要'reagent.session'。 –

我認爲這個問題可能是您實施中的一種設計缺陷。在反應程序中，狀態原子中的變化將觸發重新渲染。從提供的代碼中，不清楚會觸發重新渲染的「觸發器」是什麼。它可能會馬上看到完整的頁面代碼，看看你是如何調用JavaScript - 它可能只是因爲init只運行第一頁加載而不是每頁。可能發生的事情是

您訪問的第一頁。 mount-components函數被調用，並且只爲您的組件找到一個div元素目標，所以您只能看到一個組件呈現。
您訪問第二頁。現在你有了第二個div元素的頁面，但是問題是你的本地狀態沒有任何改變來觸發組件的重新渲染，所以你看不到第二個組件。基本上，需要告訴試劑/反應需要重新渲染組件。

使用試劑，我認爲如果您將客戶端作爲單頁應用程序（SPA）實施，效果會更好。您使用試劑原子來存儲您的應用程序狀態，並使用該原子中的值來確定/控制組件在頁面上呈現的內容/時間。回調服務器主要用於傳遞數據而不是頁面html（總體簡化並忽略客戶端渲染等）。

如果你真的想這樣做，你可能需要把你的渲染命令放在不同的函數中，然後在每個頁面中調用不同的JavaScript調用相應的'run'函數，它將渲染組件。或者，您可以將組件鏈接到某種狀態標誌，該標誌在加載新頁面時會更新，以便在新頁面到達時重新運行裝載組件功能。

來源

2015-12-20 00:01:18

試劑渲染多個組件

回答

相關問題