A minimalistic ClojureScript interface to React.js
amarjeet 2021-01-11T10:37:22.011900Z

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-himik 2021-01-11T10:43:42.012Z

Short answer: no, not possible.

amarjeet 2021-01-11T10:44:31.012200Z

hmm, thats bad 😞

amarjeet 2021-01-11T10:45:06.012400Z

Thanks @p-himik

oliver 2021-01-11T16:13:06.013300Z

Hi, I'm trying to recreate the 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-&gt;clj struc :keywordize-keys true)]
         [: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-himik 2021-01-11T17:02:39.013500Z

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-&gt;clj, and Reagent uses something like clj-&gt;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-himik 2021-01-11T17:03:30.013700Z

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.

oliver 2021-01-11T17:43:15.014200Z

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 []
  [:&gt; Gallery
   [:&gt; Item
    {:original "<>"
     :thumbnail "<>"
     :width "1024"
     :height "768"}
    (fn [^js struc]
       [: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-himik 2021-01-11T18:12:47.014400Z

> 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-himik 2021-01-11T18:15:02.014600Z

And what is your React version?

oliver 2021-01-11T18:27:50.014800Z

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)

oliver 2021-01-11T18:28:47.015Z

as per my package.json the React versions are:

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

oliver 2021-01-11T18:29:21.015200Z

Reagent is:

[reagent "0.9.1"]

oliver 2021-01-11T18:31:49.015400Z

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

p-himik 2021-01-11T18:32:26.015600Z

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!

oliver 2021-01-11T18:33:51.015800Z

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!

Deven 2021-01-11T19:04:26.016200Z

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.

Deven 2021-01-11T19:05:09.016500Z



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