use predefine react component from reagent?

混江龙づ霸主 提交于 2019-12-03 09:34:34

问题


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.


回答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.



来源:https://stackoverflow.com/questions/28759108/use-predefine-react-component-from-reagent

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!