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

Question

我有一些带有反应组件抽象的外部 UI，我想从试剂中重用它们，有没有什么方法可以通过从 clojurescript 传递数据来直接渲染预定义的 react 组件。我是 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")))

请注意，我们通过使用 #js 将 props 作为纯 js 对象传递给 CommentBox 并将原子转换为纯 js clj-> js。如果我错过了什么，你可以在gist中找到其余的内容。 .