如何使用Om/Clojurescript（來自jQuery）實現React中的基本動畫？

我與Om/Clojurescript一起潛水到React，迄今爲止我的所有前端工作都與jQuery合作過，我在理解如何實現jQuery中的oneliner的簡單常見任務時遇到了很大的障礙。如何使用Om/Clojurescript（來自jQuery）實現React中的基本動畫？

舉個很簡單的例子，一個按鈕，切換菜單：

$('#hamburger-icon').click(function(){ 
    $('.menu-can-toggle').toggleClass('active'); 
});

http://jsbin.com/tufisufaha

從我的理解，在作出反應，它是做DOM操作我無法實現這個簡單的jQuery功能React之外哪些可能導致問題，更正？

因此，我所做的，從我可以計算出，那我想象是不是最好的解決辦法了一句：

(defcomponent test-header [app owner] 
    (init-state [_] 
    {:open false}) 
    (render-state [_ {:keys [open]}] 
    (dom/div #js{:id "menu-trigger" :className (str (when open "active")) 
     :onClick #(om/set-state! owner :open (not (om/get-state owner :open)))} 
     (dom/span {:class "line line-1"}) 
     (dom/span {:class "line line-2"}) 
     (dom/span {:class "line line-3"})) 
    (dom/ul {:id "menu"} 
     (dom/li "Item 1") 
     (dom/li "Item 2") 
     (dom/li "Item 3"))))

哪裏，點擊#menu-trigger時，切換其:open狀態。我現在很困惑我如何切換.active類ul#menu，或其他組件如何響應此操作。（jQuery中類似於選擇$('.menu-can-toggle')。

我相信這只是讓我的頭圍繞一個新的範式或接近這樣的任務的問題，但一切我發現似乎與React CSSTransitionGroup等極其複雜的，和我我只是想知道是否有一個標準的方式來實現簡單的任務，如（本質上是單行） jQuery以上

來源

2015-10-26 waffl

把一個函數放在ul中，根據「open」的值切換類名。實例，顯示（塊或無）

(defn display [open] 
    (if open 
    #js {} 
    #js {:display "none"}))

基本上，jQuery正在查找節點並添加/刪除類。當你的組件被重新繪製時（onclick +狀態改變），你必須用代碼修改「虛擬DOM」。 React會處理剩下的事情。

來源

2015-10-26 13:32:15

如何使用Om/Clojurescript（來自jQuery）實現React中的基本動畫？

回答

相關問題