Fork me on GitHub
#reagent
<
2021-01-11
>
amarjeet10:01:22

Is there a way to fetch (programatically) all props that a react component class or an element support? For example, if I wish to know what all props (and their types) are supported by react’s Button , what could be the function call? I have tried a few method calls via js interop, but no success so far. I am wondering if one of you have tried this in cljs context?

p-himik10:01:42

Short answer: no, not possible.

amarjeet10:01:31

hmm, thats bad 😞

oliver16:01:06

Hi, I'm trying to recreate the https://github.com/dromru/react-photoswipe-gallery#basic-usage and keep running into trouble with a React ref. Here's what I have:

(defn rpg []
  [:> Gallery
   [:> Item
    {:original ""
     :thumbnail ""
     :width "1024"
     :height "768"}
    (fn [struc]
      (let [{:keys [ref open]} (js->clj struc :keywordize-keys true)]
        (r/as-element
         [:img {:ref ref :onClick open :src ""}])))]])
The example above works as expected. But as soon as I add add another Item component I get Uncaught Error: No valid 'ref' provided. You should use 'ref' from render prop of Item component. I have since read up on React Refs and how to use them from Reagent… but I cannot really relate that to the Problem at hand. ref, as destructured inside the fn, is a map {:current null}… In all examples I've found refs should rather be functions resetting an atom. Any ideas as to what I'm missing here? Many thanks!

p-himik17:01:39

I have no idea why it works as is - usually it doesn't. Maybe there's special logic for when there's just one Item. The issue is that you're using js->clj, and Reagent uses something like clj->js internally as well. Such a roundtrip creates a completely new ref. Yes, the content is the same, but the changes made by :img will not be visible by Item.

p-himik17:01:30

Instead, try something like [:img {:ref (.-ref struc) ...}]. And don't forget to tag struc with ^js to make sure that .-ref isn't mangled during advanced compilation.

oliver17:01:15

Hi, thanks for having a look at this. I really appreciate it! The documentation , indeed, states that a ref is only needed when there's more than one item (I will, however, omit the second one in the example to avoid clutter). Your idea totally makes sense. I have now changed the code as follows:

(defn rpg []
  [:> Gallery
   [:> Item
    {:original ""
     :thumbnail ""
     :width "1024"
     :height "768"}
    (fn [^js struc]
      (r/as-element
       [:img {:ref (.-ref struc) :onClick (.-open struc)
              :src ""}]))]])
			  
While the ref is now taken into account, I'm now getting a TypeError: struc.ref is not a function… Printing the ref at the Console, reveals that it is a JS-Object with a DOM-Node (img) under the current: key. Maybe the fact that I've never used React other than via Reagent is coming back to bite me here…

p-himik18:01:47

> it is a JS-Object with a DOM-Node (img) under the current: key. That's exactly what should happen if the ref is created with react/createRef. What is the call stack of that TypeError?

p-himik18:01:02

And what is your React version?

oliver18:01:50

Here's the complete stack trace:

galerie.js:1673 TypeError: struc.ref is not a function
    at eval (core.cljs:185)
    at exports.Item (item.js:36)
    at renderWithHooks (react-dom.development.js:15109)
    at beginWork$1 (react-dom.development.js:17343)
    at HTMLUnknownElement.callCallback (react-dom.development.js:348)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:398)
    at invokeGuardedCallback (react-dom.development.js:455)
    at beginWork$$1 (react-dom.development.js:23218)
    at performUnitOfWork (react-dom.development.js:22212)
    at renderRoot (react-dom.development.js:22186)

oliver18:01:47

as per my package.json the React versions are:

"react": "16.9.0",
    "react-dom": "16.9.0",

oliver18:01:21

Reagent is:

[reagent "0.9.1"]

oliver18:01:49

Ha! Just updated regant to 0.10.0… looks like that did the trick…!

p-himik18:01:26

Huh. I was expecting React to be below 16.3.0 because that's where they introduced createRef. But glad that you got it working!

oliver18:01:51

Yeah… afaict everything looks good… thank you so much… sometimes all that's needed is an idea from another mind. thanks a lot for your time!

👍 3
Deven19:01:26

Hi there, 👋 We are looking for part-time FE devs to work on an exciting new web app. Check this post for details and DM questions to myself.

mikethompson21:01:36

@U01JPQW6Q73 You'll likely be thrown off the clojurists platform for posting jobs outside of the #jobs channel. I'd suggest you remove this post immediately.