Fork me on GitHub
#reagent
<
2022-12-07
>
jahson09:12:07

Hi! We're using antd and in the antd/dropdown there is https://github.com/ant-design/ant-design/blob/4.x-stable/components/dropdown/dropdown.tsx#L166-L175 that causes child component to be cloned with an updated className. Everything works fine, when used like this:

(ns components
  (:require ["antd/es/button" :default Button]
            ["antd/es/dropdown" :default Dropdown]))

(def button (r/adapt-react-class Button))
(def dropdown (r/adapt-react-class Dropdown))

...

[dropdown {:menu some-menu}
  [button {:type "secondary"} "Button with dropdown"]]
But it breaks when I wrap button. It seems like the className is not set properly and dropdown stops working:
(defn btn []
  ;; NOTE: unnecessary details were stripped down
  (let [this (r/current-component)]
    (into [:> Button (r/props this)]
          (r/children this))))

...

[antd/dropdown {:menu some-menu}
  [btn {:type "secondary"} "Button with dropdown"]]
When I log this I can see className in cmp.props object. I've found the way to fix it, but it looks a bit wordy:
[antd/dropdown {:menu some-menu}
  (let [x (r/reactify-component btn)]
    (r/create-element x #js {:type "secondary"
                             :children "Button with dropdown"}))]
Is there any other way around this?