This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-06-08
Channels
- # aleph (52)
- # beginners (74)
- # boot (8)
- # cider (4)
- # clara (3)
- # cljs-dev (1)
- # cljsjs (2)
- # cljsrn (1)
- # clojars (2)
- # clojure (300)
- # clojure-argentina (1)
- # clojure-dev (9)
- # clojure-italy (10)
- # clojure-nl (1)
- # clojure-russia (77)
- # clojure-sg (9)
- # clojure-spec (38)
- # clojure-uk (70)
- # clojurescript (108)
- # core-async (12)
- # cursive (9)
- # data-science (4)
- # datascript (7)
- # datomic (37)
- # defnpodcast (4)
- # emacs (11)
- # graphql (6)
- # jobs (3)
- # jobs-discuss (1)
- # juxt (3)
- # keechma (1)
- # klipse (4)
- # lein-figwheel (1)
- # lumo (1)
- # off-topic (3)
- # om (5)
- # onyx (10)
- # parinfer (3)
- # pedestal (1)
- # perun (1)
- # protorepl (3)
- # re-frame (35)
- # reagent (19)
- # spacemacs (4)
- # specter (2)
- # uncomplicate (279)
- # unrepl (32)
Hi everyone. With react-native+reagent I created a component using reagent/create-class
and added few extra "lifecycle" functions (kinda like what https://github.com/madsleejensen/react-native-transitiongroup does) that I have planned to call from parent via :ref #(reset! ref %)
to implement some animations/transitions. However, it looks like those functions are not visible in a ref I get. Does anyone know if this is something that should be doable while using Reagent components?
@pixell, that's exactly how I would approach it as well
could you post some code?
Specifically what function calls fail?
@pesterhazy, thanks. I'll try make a small example as this codebase makes posting code a bit tricky.
@pesterhazy, Now I had the time to create a HTML example: https://github.com/pixell/reagent-extra-methods-in-create-class-html/blob/master/src/reagent_extra_methods_in_create_class_html/core.cljs.
It contains a view
component with additional lifecycle function componentWillAppear
. After creating the class I'll check that the function exists. These view
s are wrapped in transition-group
that assigns refs to each children based on key. It also keeps a track of children in its state as some transitions outlive the visibility of element managed outside the transition-group
.
I removed the code responsible for transitions, but in :component-did-update
of transition-group
I get the element using a ref and it does not contain the callback. I'm thinking that the code I use to clone and render all children of transition-group
might be the reason, but haven't yet figured out it.
interesting!
@pixell, not sure if reagent supports non-standard lifecycle methods: https://github.com/reagent-project/reagent/blob/0b91bc2580fd9211a58749153747c327d36e5b11/src/reagent/impl/component.cljs#L144
your reagent-render is doing some unusual things, maybe that interferes
you can normally just use [component {:ref (fn [r] ...)}]
why are you looking for the method componentWillAppear
? Do you want to call it?
a workaround that will work for sure is to make a pure-react component, using react's normal createClass directly
you could try to get things working with that first, and then port to reagent
just brainstorming here 🙂 . I'm not familiar with transition-group
Thanks, I appreciate all the help I get 🙂 I would like to few common methods (mixin?) that do animations during transitions from a view to another. It's actually the animation when leaving a view that requires me to keep the element alive longer than the parent view does.
Is there a way to force a component to re-render when it returns false to shouldComponentUpdate?