This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-08-13
Channels
- # announcements (10)
- # aws (1)
- # babashka (8)
- # babashka-circleci-builds (1)
- # beginners (67)
- # calva (4)
- # cljs-dev (42)
- # clojars (4)
- # clojure (213)
- # clojure-dev (4)
- # clojure-europe (18)
- # clojure-nl (1)
- # clojure-uk (8)
- # clojurescript (13)
- # conjure (6)
- # cursive (63)
- # data-science (5)
- # datomic (11)
- # events (1)
- # graalvm (2)
- # graalvm-mobile (1)
- # honeysql (4)
- # kaocha (3)
- # leiningen (19)
- # lsp (32)
- # malli (3)
- # meander (13)
- # news-and-articles (3)
- # off-topic (8)
- # polylith (5)
- # re-frame (47)
- # reitit (2)
- # shadow-cljs (28)
- # sql (3)
- # tools-build (4)
- # tools-deps (51)
- # uix (9)
- # xtdb (3)
#uix
<
2021-08-13With uix you can usually create a ref
then pass it into a component to attach it e.g.
(let[r (uix/ref)]
(do-something-with r)
[:div {:ref r} "ABC"]
Would that work for you?Alternatively :ref
attribute on a component can be a callback function that receives the ref. e.g.
[:div {:ref (fn [element] (.-width (.getBoundingClientRect element)))} "ABC"]
The (uix/ref) can also be created in a parent component and passed down to a child
(defn child [r] [:div {:ref r} "ABC"] )
(defn parent[] (let[r (uix/ref)] [child r]))
I've found these two ways of managing refs are usually enough without needing react/forwardsRef
(response to @ben.hammond)
I'll try
the Transition
component is getting started from within the material-ui Dialog
which causes me a bit of confusion about how the Transition and the ref get set up
I'm wondering if you can do something like:
[:> Dialog/default
{:open @opened
:TransitionComponent Slide
(i.e. just pass in the class name without any ref
required.
so if I rewrite as
(defn Transition2
[ref]
[:> Slide/default {:direction "up" :ref ref}])
(defn AlertDialogSlide
[]
(let [opened (uix/state false)
r (uix/ref)]
[:div
[:> Button/default {:variant "outlined"
:color "primary"
:on-click #(reset! opened true)}
"Slide in alert dialog"]
[:> Dialog/default
{:open @opened
:TransitionComponent (uix/as-react (Transition2 r))
:on-close #(reset! opened false)
:aria-labelledby "alert-dialog-slide-title"
:aria-describedby "alert-dialog-slide-description"}
...
then I get the load-time error
checkPropTypes.js:21 Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see
in ForwardRef (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by uix.checkmate-dialog/AlertDialogSlide)
in div (created by uix.checkmate-dialog/AlertDialogSlide)
in uix.checkmate-dialog/AlertDialogSlide
in uix.checkmate-dialog/AlertDialogSlide (created by )
in div (created by )
in ThemeProvider (created by )
in
in