Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React component in pure cljs using ES6 class inheritance
;; implementing a React component in pure cljs, no reagent necessary
;; using goog.object.extend to create a ES6 class that inherits from
;; React.Component
;; credit to @thheller
(defn MyReact [props context updater]
(this-as this
(js/React.Component.call this props context updater)))
(js/goog.object.extend (.-prototype MyReact)
js/React.Component.prototype
#js {:render
(fn []
(this-as this
(js/React.createElement "h1" nil "hello world")))})
(js/ReactDOM.render (js/React.createElement MyReact) js/klipse-container)
@luposlip
Copy link

luposlip commented Aug 17, 2018

Just out of curiosity - do you know what the idiomatic way of doing the same with reagent would be?
I currently have imported https://whoisandy.github.io/react-rangeslider via :foreign-libs:

:foreign-libs [{:file "resources/public/js/rangeslider.min.js"
                  :provides ["react-rangeslider"]
                  :module-type :es6}]

Then in my view.cljs I add this to the ns declaration:

[react-rangeslider :as range-slider]

In the hiccup I do the following:

[(r/adapt-react-class (. range-slider -default))]

But that spawns an error:

..$node_modules$react_rangeslider$lib$Rangeslider.default is not a constructor
    at Slider.componentDidMount (Rangeslider.js:29)

, probably because I need to do what you do above. Which is fine, I'm just not sure what the idiomatic way would be.

Do you happen to know about that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment