This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-04-21
Channels
- # announcements (14)
- # aws (8)
- # babashka (3)
- # babashka-sci-dev (41)
- # beginners (78)
- # calva (15)
- # cider (9)
- # clj-commons (10)
- # clj-kondo (5)
- # cljs-dev (8)
- # clojure (47)
- # clojure-bay-area (3)
- # clojure-europe (13)
- # clojure-nl (2)
- # clojure-norway (15)
- # clojure-uk (13)
- # clojured (2)
- # clojurescript (20)
- # conjure (29)
- # cursive (4)
- # emacs (19)
- # events (3)
- # funcool (13)
- # hyperfiddle (16)
- # jobs (2)
- # lsp (4)
- # malli (13)
- # meander (1)
- # missionary (2)
- # nrepl (7)
- # off-topic (68)
- # other-languages (82)
- # polylith (1)
- # reagent (28)
- # reitit (12)
- # releases (3)
- # remote-jobs (5)
- # ring (27)
- # sci (6)
- # shadow-cljs (9)
- # spacemacs (2)
- # sql (10)
- # tools-deps (10)
- # vim (10)
hey all - I’m trying to wrap a react component with reagent to update the props before passing them on, and having some trouble. Neither of these seem to work:
(defn MyBox [opts & children]
(into [MB/ContainedMathbox opts] children))
(defn MyBox [opts & children]
[MB/ContainedMathbox opts children])
While a bare
[MB/ContainedMathbox opts children]
works fine.
Here is the error I am seeing:
https://gist.github.com/sritchie/bb3f4d8f14a2ea58d8db656ba6df3163
does anyone have advice on a clean way to write components that take children and pass them along?
I will also try the r/children
method but it feels cleaner to go with this function-callable style.[box/ContainedMathbox
{:options opts
:containerStyle {:height "400px" :width "100%"}
:ref (mb/opts->setup
{:background-color 0xeeeeee
:max-distance 4
:camera-position [2.5 1 2.5]
:scale 720 :focus 1})}
[box/Cartesian
{:range [[0 1] [0 1] [0 1]]
:scale [1 1 1]}
[box/Volume
{:id id
:width width-rez
:bufferWidth width-rez
:height height-rez
:bufferHeight height-rez
:depth depth-rez
:bufferDepth depth-rez
:items 1
:channels 4
:live false
:expr (fn [emit x y z]
(emit x y z opacity))}]
[box/Point
{:points (str "#" id)
:colors (str "#" id)
:color 0xffffff
:size size}]]]
@U2FRKM4TW so I wanted to start by writing a function that could replace box/ContainedMathbox
with box/MyBox
and otherwise be exactly the same code form
So you're passing a single child, and it works.
The error seems to be from the case of the second defn
.
What's the error in the case of into
?
in the case with into
, I am using it as
(defn MyBox [opts & children]
(into [MB/ContainedMathbox opts] children))
[box/MyBox <same 2 args>]
and the error is, I BELIEVE, the same in both of my MyBox
cases but let me see, one sec
that’s what I thought too!
these are both errors, first and second correspond to
(defn MyBox1 [opts & children]
(into [MB/ContainedMathbox opts] children))
(defn MyBox2 [opts & children]
[MB/ContainedMathbox opts children])
I am using these in #clerk so maybe something strange is going on in that stack
The errors are different - the second one is "more incorrect". :) Not sure why the first one doesn't work...
it is odd, right?
this must be something with the #clerk layer
if I JUST DO THIS:
(defn MyBox3 [opts child]
[MB/ContainedMathbox opts child])
and then call it as a function: (mbr/MyBox3 <same 2 arguments>), so I get a vector back:
I get
"Assert failed: Invalid Hiccup form: [#js {\"$$typeof\" #object[Symbol(react.forward_ref)], :render #object[Function]} {:options {:plugins [\"core\" \"controls\" \"cursor\"], :controls {:klass OrbitControls}, :camera {}}, :containerStyle {:height \"400px\", :width \"100%\"}, :ref #object[Function]} [#object[reagent.impl.template.NativeWrapper] {:range [[0 1] [0 1] [0 1]], :scale [1 1 1]} [#object[reagent.impl.template.NativeWrapper] {:bufferWidth 10, :channels 4, :bufferDepth 11, :width 10, :bufferHeight 5, :expr sci.impl.fns.fun_._arity_4, :id \"volume\", :depth 11, :live false, :items 1, :height 5}] [#object[reagent.impl.template.NativeWrapper] {:points \"#volume\", :colors \"#volume\", :color 16777215, :size 20}]]]\n (in nextjournal.clerk.sci_viewer.inspect)\n(valid-tag? tag)"
If MB/ContainedMathbox
is a React component and not a Reagent one, then I'm surprised it works.
Try your initial into
approach but add :>
in front of MB/...
.
as an error message. but it is quite confusing
Reagent doesn't work with React components just like that - you have to either use :>
or adapt-react-class
(if it's a class component).
oh, sorry, it is actually a component wrapped in (r/adapt-react-class ...)
thanks, I will see if I can get it done without the clerk layer
@U2FRKM4TW I found my issue! you had basically found it before. because I was using clerk I was making changes on the server side (and sending them to the client) and on the client side; I just realized that on my cljs-only changes, my namespace prefix was referring to the original js components, NOT to my wrapped components via adapt-react-class
. it all works when I properly use :>