ClojureScript 编写 React 组件:Reagent
y37f
10年前
Reagent 是一个简单的 ClojureScript 接口到 React. Reagent 提供一种使用 ClojureScript 高效编写 React 组件的方法。
示例
Reagent uses Hiccup-like markup instead of React's sort-of html. It looks like this:
(defn some-component [] [:div [:h3 "I am a component!"] [:p.someclass "I have " [:strong "bold"] [:span {:style {:color "red"}} " and red"] " text."]])
You can use one component inside another:
(defn calling-component [] [:div "Parent component" [some-component]])
And pass properties from one component to another:
(defn child [name] [:p "Hi, I am " name]) (defn childcaller [] [child "Foo Bar"])
You mount the component into the DOM like this:
(defn child [name] [:p "Hi, I am " name]) (defn childcaller [] [child "Foo Bar"])
assuming we have imported Reagent like this:
(defn mountit [] (reagent/render-component [childcaller] (.-body js/document)))
State is handled using Reagent's version ofatom, like this:
(def click-count (atom 0)) (defn state-ful-with-atom [] [:div {:on-click #(swap! click-count inc)} "I have been clicked " @click-count " times."])