This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-07-24
Channels
- # announcements (5)
- # beginners (184)
- # calva (32)
- # cider (29)
- # clj-kondo (1)
- # cljdoc (29)
- # cljsrn (6)
- # clojure (44)
- # clojure-dev (36)
- # clojure-europe (9)
- # clojure-italy (18)
- # clojure-losangeles (1)
- # clojure-nl (3)
- # clojure-spec (7)
- # clojure-uk (30)
- # clojure-ukraine (1)
- # clojuredesign-podcast (8)
- # clojurescript (65)
- # code-reviews (21)
- # core-async (25)
- # cursive (51)
- # data-science (3)
- # datascript (2)
- # datomic (25)
- # emacs (14)
- # events (1)
- # figwheel-main (3)
- # fulcro (3)
- # graalvm (5)
- # jackdaw (17)
- # kaocha (14)
- # luminus (5)
- # off-topic (17)
- # pathom (7)
- # pedestal (2)
- # re-frame (71)
- # reagent (25)
- # shadow-cljs (83)
- # spacemacs (31)
- # sql (92)
- # tools-deps (23)
- # vim (102)
- # xtdb (5)
How to make child component totally re-mount when its props changes.
(defn home-page []
(re-frame/dispatch-sync [:payload/load :home])
(let [data (re-frame/subscribe [:payload/data :home])]
(fn []
(let [{:keys [banners]} @data]
(println "render -->" banners)
[:div {:style {:height "100vh"
:width "100%"}}
[banner/banner
{:item-com banner-image
:items banners
:height 120}]]))))
The banner/banner
is something like
(defn banner [props]
;; HERE should re-render happen at here when props changing?
(fn []
))
;; HERE should re-render happen at here when props changing?
Code before the
inner render function will only render once on mount in a form-2 component. https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#form-2--a-function-returning-a-function
If you want to track changes in banner
(a form-2 component) you’ll need to destructure them in the inner render function or use with-let
https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#appendix-b---with-let-macro
@oconn Isee, so the with-let is kind of an enhancement of form-2? what if I have a timer in with-let and that timer function need to access the newest prop?
from the official documentation:
(defn timer-component []
(let [seconds-elapsed (r/atom 0)]
(fn []
(js/setTimeout #(swap! seconds-elapsed inc) 1000)
[:div
"Seconds Elapsed: " @seconds-elapsed])))
This one for example updates itself any time the atom changes (it is literally a timer), if you want to see the actual working example https://reagent-project.github.io/
@hobosarefriends thanks! I think this example remind me something very useful.
This example should how to create a timer, but it's not a real world example, cause it did not destroy the timer. I trying to create a timer with with-let and try to ACCESS THE PROPS in timer function. But this is incorrect, I shouldn't do this. cause the timer will be created only once, it can't get the newest props.
So like this example, I should use timer function as an accumulator. And calculating in the render function.
i had an idea for loading screen effect basic idea is to have loading effect until main page is ready to be shown once it's ready loading should disappear and main page should be shown i want to avoid partial render of pictures, elements i am not sure how to do this are there any examples in regent or re-frame? effect is similar to https://colorlib.com/demo?theme=colid hopefully u can see it when u first load it
you could have a component that shows the loading screen until a certain value/atom/prop changes and then it renders a hidden version or nothing at all.
just change the atom from the last thing that'll load or if you don't know which is the last... eeehh... check that all the components have loaded somehow? Dunno, sorry I don't have any examples on hand.
we are on the same page but how practically and idiomatically this is done is something different
@lepistane just put out of the screen, when everything ready move into screen?
Hi guys. I’m trying to implement the render props pattern in a reagent component. But can’t get it to work without the render component fn unmounting if declared anonymously.
Any ideas?
So say the component I’m trying to create is called subscribe. With usage: [subscribe (fn [result] [:div result])] [:div result] is always unmounted and recreated
With an impl of (defn subscribe [child-fn] [child-fn @x])
Apologies for formatting. I’m typing on a phone