如何使用Om/Clojurescript（来自jQuery）实现React中的基本动画？

Question

我与Om/Clojurescript一起潜水到React，迄今为止我的所有前端工作都与jQuery合作过，我在理解如何实现jQuery中的oneliner的简单常见任务时遇到了很大的障碍。

举个很简单的例子，一个按钮，切换菜单：

$('#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以上

Answer 1

把一个函数放在ul中，根据“open”的值切换类名。实例，显示（块或无）

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

基本上，jQuery正在查找节点并添加/删除类。当你的组件被重新绘制时（onclick +状态改变），你必须用代码修改“虚拟DOM”。 React会处理剩下的事情。