reactjs - 使用试剂中预定义的反应成分？

Question

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

Answer 1

我们试试看！我们可以从将组件写入 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")))

请注意，我们通过使用并将 atom 转换为纯 js 将 propsCommentBox作为纯 js 对象传递给两者。如果我遗漏了什么，您可以在gist中找到其余部分。#jsclj->js