This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-01-07
Channels
- # adventofcode (4)
- # aleph (1)
- # architecture (9)
- # beginners (67)
- # boot (7)
- # boot-dev (12)
- # cider (3)
- # clojure (166)
- # clojure-austin (3)
- # clojure-estonia (1)
- # clojure-greece (2)
- # clojure-russia (5)
- # clojure-spec (1)
- # clojure-uk (4)
- # clojurescript (19)
- # cursive (1)
- # data-science (5)
- # datascript (4)
- # datomic (3)
- # docs (10)
- # emacs (24)
- # events (4)
- # fulcro (16)
- # graphql (8)
- # hoplon (2)
- # jobs-discuss (1)
- # leiningen (5)
- # off-topic (2)
- # planck (30)
- # re-frame (20)
- # reagent (36)
- # ring (3)
- # shadow-cljs (5)
- # spacemacs (1)
- # specter (2)
Can I ask a dumb question?
When semantic-ui-react expects an anonymous Js function that returns a component to render, e.g. ...
{menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> }
(that code is from: https://react.semantic-ui.com/modules/tab#tab-example-basic)
... what is the Clojurescript equivalent, using your approach? I assumed something like ...
(def tabs
[{:menuItem "Login" :render [sa/TabPane [login-form]]}
{:menuItem "Register" :render [sa/TabPane [registration-form]]}])
(defn login-or-register-form []
[sa/Tab {:panes tabs}])
… but I get errors upon errors (e.g. “e.call is not a function”; screenshot attached).
This happens whether I’m using soda-ash or kennethkalmer’s approach (https://www.opensourcery.co.za/2017/02/12/using-semantic-ui-react-with-re-frame/)
Any help or insights you could offer would be greatly appreciated 🙂 Many thanks!To be clear, I have other semantic-ui-react components (Grid, Search) working in my app already.
(require '[reagent.core :as r])
(def tabs
[{:menuItem "Login" :render (r/as-element [sa/TabPane [login-form]])}
{:menuItem "Register" :render (r/as-element [sa/TabPane [registration-form]])}])
(defn login-or-register-form []
[sa/Tab {:panes tabs}])
I’m not 100% sure that doing it in a var that evaluated prior to the “render” being called on login-or-register-form
would never have any odd consequences. I don’t think it should in this case. Especially since there are no props being passed along or any reactive atom dereferences.
(defn login-or-register-form []
(let [tabs [{:menuItem "Login" :render (r/as-element [sa/TabPane [login-form]])}
{:menuItem "Register" :render (r/as-element [sa/TabPane [registration-form]])}]]
[sa/Tab {:panes tabs}]))
(def tabs
[{:menuItem "Login" :render (fn [] (reagent/as-element [sa/TabPane [login-form]]))}
{:menuItem "Register" :render (fn [] (reagent/as-element [sa/TabPane [registration-form]]))}])
however, I did find reading all posts in http://reagent-project.github.io/news valuable
Just read them starting at oldest and realizing things have changed a bit over time hah
In particular, http://reagent-project.github.io/news/news050.html discusses enhancements that were made for React interop
hard to know that the underlying React component you are interoperating with has props with that semantic meaning
i.e. hard to know there is a prop named :render
that is specifically wanting you to pass a render fn - this isn’t a React built-in concept
When interop’ing with various React libs, you’ll probably typically find you have to use one of the few interop functions of Reagent
I ran into an issue with semantic-ui-react’s Popover component’s trigger
prop, so I’ll see if I can solve that too using Reagent’s interop functions
and thank you @gadfly361 for the nice soda-ash library