使用试剂中的预定义反应成分?

时间:2015-02-27 06:46:25

标签: reactjs clojurescript om reagent

我有一些带有反应组件抽象的外部UI,我想从试剂中重用它们,有没有办法直接通过从clojurescript传递数据来呈现预定义的反应组件。我是一个clojurescript初学者。

1 个答案:

答案 0 :(得分:17)

试试吧!我们可以从js文件中编写组件开始。

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

然后我们可以直接从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")))

请注意,我们通过使用CommentBox并将原子转换为普通js #js,将道具传递给clj->js作为普通js对象。如果我错过了某些内容,您可以在gist中找到其余内容。