This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-03
Channels
- # beginners (98)
- # boot (18)
- # chestnut (2)
- # cider (90)
- # cljdoc (3)
- # cljs-dev (1)
- # clojure (64)
- # clojure-dev (14)
- # clojure-dusseldorf (4)
- # clojure-italy (11)
- # clojure-nl (5)
- # clojure-spec (9)
- # clojure-uk (69)
- # clojurescript (63)
- # code-reviews (2)
- # core-logic (20)
- # cursive (13)
- # datomic (52)
- # dirac (2)
- # emacs (4)
- # figwheel (6)
- # hyperfiddle (13)
- # luminus (4)
- # nrepl (1)
- # off-topic (7)
- # onyx (9)
- # overtone (3)
- # parinfer (3)
- # pedestal (1)
- # re-frame (31)
- # reagent (74)
- # reitit (34)
- # rum (3)
- # shadow-cljs (51)
- # spacemacs (22)
- # specter (7)
- # tools-deps (23)
- # uncomplicate (3)
- # vim (9)
But I dont see the code of how the react component is actually refreshed (actual call to react api)
I just know of two ways the component can refresh 1) Changing of props 2) Setting the state The child components can refresh as new props are passed, but I dont see a call to React’s setState anywhere in reagent in order to refresh the component whose state changed
Found it https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/batching.cljs#L39
Hey all, curious about passing children down to a component. For example, in React I would write something like this:
const Container = (props) => (
<header>
{ this.props.children }
</header>
)
yet in clojure, I might write the above like this:
(defn Container
[props & children]
[header
children])
Its interesting because React itself gives props which has children as a property. Is my clojure example the agreed upon way or should I be doing something like r/props
@tkjone there isn’t really a distinction between children and props in reagent. technically, all parameters are passed as children, unless the first parameter is a map, in which case that parameter is passed as props and the remainder as children
even in react, there’s the so-called “slots” pattern where you pass children under named props. i think the pattern you have above is the normal one where you don’t care about your children and just want to pass them through. https://daveceddia.com/pluggable-slots-in-react-components/
True. I suppose I was curious if r/props
would be used in an instance like this as a way to access the children, but I think you are right that that is because of how the JSX confuses this a little with its syntax
yea there’s no point in doing that. afaick, you only need r/props
and r/children
in form-3 lifecycle methods where you don’t have access to the render-function parameters.
the this.props.children
is a convention entirely introduced by the JSX compiler. react doesn’t know about or treat it differently, though all react libraries generally abide by this convention.
Cool. Thanks for clearing that up!
@lee.justin.m I’m not sure that’s quite correct. the signature for createElement
is:
createElement(component, props, children)
and the corresponding function component will receive it’s children in a children
property on the props
object, irrespective of using JSX or not
reagent paints over this and let’s us pretty much ignore the normal props
object that React uses
@lilactown ah! I stand corrected
I’m 99% sure that there isn’t any difference in passing children that way vs manually but that’s interesting
creating trees of components is visually nicer when you don’t have the trees inside of a bunch of curly braces
I’m spending some time using raw React in CLJS right now and I kind of appreciate it 😛
yea i looked at the source. it just copies them over to props.children
and deals with variadic #s of children
interesting discussion about it here: https://github.com/facebook/react/issues/4694
I’m wondering, for my own uses, if I’ll get in trouble if I just stop dealing with the fact that createElement
is variadic and pass in children
to the props object directly
looking at the code, I don’t think createElement
does anything to props.children
if you only pass 2 arguments
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L323
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L347
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L317
I think if its type 1 component and the first element is a map, it will be passed as a props, else props will be nil
Log story short @tkjone as @lee.justin.m mentioned, you dont need to worry about props
Good point. Thanks!
I’ve looked online and on slack, but can’t find docs on how to pass components as props to another component. In React JSX:
<FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
What I’m trying in reagent:
[mui/form-control-label {:label "Mailing address is same as above"
:control mui/checkbox}]
Error:
Warning: Failed prop type: Invalid prop `control` of type `object` supplied to `FormControlLabel`, expected a single ReactElement.
in FormControlLabel
Anybody see what I’m doing wrong?@rnagpal it looks like form-1 and form-2 components work the same:
(defn form1 [a]
[:div
[:div "form1 props = " (pr-str (reagent/props (reagent/current-component)))]
[:div "form1 children = " (pr-str (reagent/children (reagent/current-component)))]])
(defn form2 [a]
(fn [a]
[:div
[:div "form2 props = " (pr-str (reagent/props (reagent/current-component)))]
[:div "form2 children = " (pr-str (reagent/children (reagent/current-component)))]]))
(defn test-component
[]
[:div
[form1 {:a 1}]
[form1 17]
[form2 {:a 1}]
[form2 17]])
renders form1 props = {:a 1}
form1 children = nil
form1 props = nil
form1 children = [17]
form2 props = {:a 1}
form2 children = nil
form2 props = nil
form2 children = [17]
@dijonkitchen it looks like what you’re passing in is the React component, when what it expects is a React element
@dijonkitchen you need to run the hiccup through as-element
checkout https://cljdoc.xyz/d/reagent/reagent/0.8.1/doc/tutorials/interop-with-react
Thanks!
probably pretty future proof. at any rate, you can create and manipulate es6 classes directly in cljs
I’m thinking real hard right now about how to take advantage of suspense when it comes out, and other future React improvements. wondering if basing a new lib on create-react-class
might be a mistake
You are right @lee.justin.m Form1 & 2 passes props as argv
(reagent/props (reagent/current-component))
and (reagent/children (reagent/current-component))
@lilactown you can always remove it and just create the es6 classes yourself if it ever gets in the way. just don’t expose it to your users. i.e., in reagent, you could remove create-react-class and nobody would know except for dependencies
suspense is going to be freaking awesome. i cannot wait for that. it will solve so many of my problems
true, there are just certain things that are very ergonomic to do with create-react-class
that are a HUGE PITA with raw prototypes