This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-05-13
Channels
- # announcements (34)
- # aws (1)
- # beginners (99)
- # boot (19)
- # calva (26)
- # cider (24)
- # cljdoc (8)
- # cljs-dev (29)
- # clojure (107)
- # clojure-dev (3)
- # clojure-europe (12)
- # clojure-finland (1)
- # clojure-italy (24)
- # clojure-nl (5)
- # clojure-spec (13)
- # clojure-sweden (3)
- # clojure-uk (36)
- # clojurescript (4)
- # community-development (14)
- # cursive (3)
- # data-science (6)
- # datascript (57)
- # figwheel-main (3)
- # fulcro (9)
- # graalvm (11)
- # hoplon (18)
- # jobs (1)
- # jobs-discuss (2)
- # joker (10)
- # leiningen (13)
- # off-topic (23)
- # other-languages (1)
- # pathom (24)
- # pedestal (5)
- # re-frame (6)
- # reagent (45)
- # reitit (3)
- # rewrite-clj (1)
- # spacemacs (2)
- # sql (23)
- # tools-deps (6)
- # vim (5)
those are some good points, thanks
I misspoke when I said this.state.props
, I meant this.props
or very occasionally this.props.state
tracking information between different components
to try to describe the issue I was having, I have a div that renders messages by saying
[:div.panel.messages {:ref #(swap! board-dom assoc :message-list %)}
(doall (map-indexed
(fn [i msg]
[:div ...build messages here...])
@log))]
where log
is a cursor on the global (defonce state (r/atom {}))
and board-dom
is a global (defonce board-dom (atom {}))
I have that :ref
there so when the messages are re-rendered, I can see the changes and react (lol) to them
my goal for this is to have normal "sticky" auto-scrolling: if I send a message, scroll to the bottom. if I receive a message and I'm scrolled to the bottom, scroll to the bottom. if I receive a message and I've scrolled up at all, don't scroll to the bottom.
Is there a smarter way to achieve this with reagent?
I'm still not sure I completely understand. I get: - you have a list of messages - when you render a new message, scroll (maybe) Not sure why you need a ref for this. Ah unless you're scrolling to the top or bottom of the panel itself? Not the page
yeah, just that panel
i inherited this codebase, lol, it's kind of a nightmare
https://github.com/mtgred/netrunner/blob/0c4ba6cc42d69dc79cb3531e39366b21742e6b0f/src/cljs/nr/gameboard.cljs#L344 if you want the actual source
i think my question about props was me misunderstanding some stuff. reading through the react docs, it seemed like I could check props to see what's changing in a given update, and use that information to determine whether I scroll or not
do you have any suggestions or tutorials on how I could rewrite these things to be less... terrible?
But I always cringe when you have to use create-class with a bunch of atoms... It gets too messy. But I see some jQuery and other imperative things that might be necessary in order to get the desired behavior, so maybe it's worth it?
I don't have nearly the experience or knowledge to know if it's worth it, but it's certainly a mess and a lot of trouble, lol
This was originally written with Om and then ported/translated/rewritten with reagent about a year ago, so who knows what was written back then?
How do you read the props?
I don't have nearly the experience or knowledge to know if it's worth it, but it's certainly a mess and a lot of trouble, lol
I was assuming that you were talking about a reagent component like:
(defn log-page [props]
... etc)
ha yeah, I wish! That would make this very easy. I feel like the reagent github page tutorial/docs aren't super detailed and make it hard to know how to translate react tutorials/docs to reagent
reagent tries to paper over React with it’s reagent-y-ness… this project you’re working on, the code is kind of in both worlds
you’ve got all of the imperative parts of React plus the mutable parts of reagent and it’s… fun!
Extremely fun!
Outside of these specific questions I have, do you have any recommendations for tutorials or guides that I could use to help me better learn Reagent's flow/ideas?
at work, many of us were new to both ClojureScript and Reagent, and I think some really enjoyed https://www.learnreagent.com/
Thanks, I'll check that out! I appreciate your help
Reading that page, I have a new question! The Counter example is sweet, except in React you can create multiple instances of the Counter
component, each with their own state. Does creating the click-counter
atom with a def
(making it namespace global) allow you to create multiple counting-components
?
no, if you def
it, it’s using global state therefore you can’t create multiple instances that have different state
however, you can bind it locally using what’s called a “form-2” component:
(defn counting-component []
(let [click-count (r/atom 0)]
(fn []
[:div "The state has a value: " @click-count
[:input {:type "button" :value "Click me!" :on-click #(swap! click-count inc)}]])))
and that ☝️ counting-component
can be re-used and each instance will have their own local component state
Ah sick, that's great. Thank you! (What's "form-2"? Looks like I have a lot to learn, lol)
idk how i missed that! you're a champ