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."])

项目主页:http://www.open-open.com/lib/view/home/1426388995271