use predefine react component from reagent?

Question

I have some external UI with abstraction of react components and I want to reuse them from reagent, is there any way to directly render predefined react component just by passing data from clojurescript. I am a clojurescript beginner.

Somatotype

Answer 1

Let's try! We can start by writing the component in a js file.

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
                          this.props.comment
      )
    );
  }
});

Then we can call it directly from Reagent:

(defonce app-state
  (atom {:text "Hello world!"
         :plain {:comment "and I can take props from the atom"}}))

(defn comment-box []
  js/CommentBox)

(defn hello-world []
  [:div
   [:h1 (:text @app-state)]
   [comment-box #js {:comment "I'm a plain React component"}]
   [comment-box (clj->js (:plain @app-state))]])

(reagent/render-component [hello-world]
                          (. js/document (getElementById "app")))

Notice that we are passing the props to the CommentBox both as plain js objects by using #js and by transforming the atom to plain js clj->js. In case I missed something, you can find the rest in the gist.

Yesteryear

Just to add to this, there is a little more info towards the bottom of this page: reagent-project.github.io/news/news050.html – Majewski