Clojurians Log v2

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?

Short answer: no, not possible.

hmm, thats bad 😞

Thanks @p-himik

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 "<https://placekitten.com/1024/768?image=2>"
     :thumbnail "<https://placekitten.com/80/60?image=2>"
     :width "1024"
     :height "768"}
    (fn [struc]
      (let [{:keys [ref open]} (js-&gt;clj struc :keywordize-keys true)]
        (r/as-element
         [:img {:ref ref :onClick open :src "<https://placekitten.com/80/60?image=2>"}])))]])

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.

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.

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 "<https://placekitten.com/1024/768?image=2>"
     :thumbnail "<https://placekitten.com/80/60?image=2>"
     :width "1024"
     :height "768"}
    (fn [^js struc]
      (r/as-element
       [:img {:ref (.-ref struc) :onClick (.-open struc)
              :src "<https://placekitten.com/80/60?image=2>"}]))]])
			  

> 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?

And what is your React version?

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)

as per my package.json the React versions are:

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

Reagent is:

[reagent "0.9.1"]

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

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!

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!

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.

@pcj

@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.