This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-12-07
Channels
- # adventofcode (94)
- # babashka (29)
- # babashka-sci-dev (2)
- # beginners (103)
- # calva (15)
- # cider (17)
- # clj-kondo (62)
- # cljsrn (24)
- # clojars (13)
- # clojure (97)
- # clojure-belgium (3)
- # clojure-berlin (3)
- # clojure-czech (1)
- # clojure-europe (68)
- # clojure-nl (1)
- # clojure-norway (3)
- # clojure-seattle (3)
- # clojure-uk (1)
- # clojurescript (7)
- # community-development (29)
- # conjure (2)
- # cursive (14)
- # data-science (15)
- # emacs (3)
- # graphql (10)
- # gratitude (1)
- # holy-lambda (32)
- # hoplon (21)
- # hyperfiddle (2)
- # jobs (2)
- # joyride (36)
- # lsp (4)
- # meander (13)
- # off-topic (203)
- # pathom (3)
- # polylith (6)
- # re-frame (4)
- # reagent (1)
- # reitit (28)
- # releases (1)
- # shadow-cljs (16)
- # slack-help (2)
- # sql (27)
- # vim (2)
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?