On Saturday, July 26, 2014 4:19:28 AM UTC+10, Ryan Waters wrote:
> I just started learning Reagent (after learning some Om and Reactjs). Do
> Reagent components map 1:1 with Reactjs components?
>
> The code below only prints "parent done" to the console but produces no lines
> of output for "done with child component". It would suggest that, in the
> end, there's only one Reactjs component even though I feel I should have 1 +
> (length of app-state) components?
>
>
>
>
> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
>
>
>
> (enable-console-print!)
>
>
> (defn by-id [id]
> (.getElementById js/document id))
>
>
> (def app-state (atom (vec (for [n (range 5)] (hash-map :id n :item (str "this
> is line " n))))))
>
>
>
>
> (defn list-item-
> [{:keys [id item]}]
> ^{:key id} [:div item])
>
>
> (def list-item
> (with-meta list-item-
> {:component-did-mount #(println "done with child component")}))
>
>
>
>
> (defn lister-
> []
> (let [state @app-state]
> [:div
> (for [x state]
> (list-item x))]))
>
>
> (def lister
>
>
> (with-meta lister-
> {:component-did-mount #(println "parent done")}))
>
>
> (reagent/render-component [lister] (by-id "logview"))
>
>
You'll get what you expect, if you change:
(list-item x)
To:
[list-item x]
This background may help:
http://holmsand.github.io/reagent/news/any-arguments.html
BTW: you might also prefer to use reagent/create-class over the with-meta :
(defn list-item
[x]
(reagent/create-class
{:component-did-mount
#(println "child component-did-mount")
:render
(fn [_]
[:div nil (:item x)])}))
(defn lister
[]
(reagent/create-class
{:component-did-mount
#(println "lister: component-did-mount")
:render
(fn [_]
[:div
nil
(for [x @app-state]
^{:key (:id x)}
[list-item x])])}))
--
Mike
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
