On Sunday, July 27, 2014 7:09:50 AM UTC-5, Mike Thompson wrote:
> 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
Thank you! I hadn't picked up on the difference between:
(my-component x)
and
[my-component x]
I 'discovered' reagent/create-class after my original post and ended up doing
some things with that, too. I'm loving reagent right now.
--
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.
