nosco / hx

A simple, easy to use library for React development in ClojureScript.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

class & className issue when wrapping defnc component with pure react component

orestis opened this issue · comments

Hi again :)

I just ran into another issue with class & className (based on hx 0.4):

At various places, I'm wrapping some of my defnc components with react-bootstrap "Collapse" components.

The bootstrap collapse component will pass in an extra "className" attribute to my component, which I have to stick to my top-level div.

Example:

;; ... snip ... wrapping looks like:
[bootstrap/Collapse {:in is-current}
    children]

;; and component declaration looks like:

(defnc MyMenu [{:keys [class] :as props}]
  [:div {:class class}
    ;; snip
    ])

It looks like that MyMenu receives className but not class.

I haven't had time to look at the hx code to see where this could be taken care of, but I think that given that I can use MyMenu from other places by using class, it should be usable also with native React components wrapping it.

Thoughts?

That is strange. The processing for className -> class happens in the defnc macro, so I'm not sure why calling it in different ways would effect it.

I don't quite understand how you're wrapping it. Is it that children ends up being MyMenu?

Like the only notable thing I can see is that I'm guessing Collapse uses cloneElement...

EDIT: Yep, it uses cloneElement. Could that be why?

It's because the props-rewriting of className to class only happens in hiccup parsing. So cloneElement was bypassing that.