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

Question

我正在使用Om / Clojurescript進入React，與jQuery合作完成我迄今為止的所有前端工作，我正處於理解如何實現jQuery中的oneliner的簡單和常見任務的主要障礙。

舉一個非常簡單的例子來看一個切換菜單的按鈕：

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

http://jsbin.com/tufisufaha

根據我的理解，我無法在React中實現這個簡單的jQuery功能，因為它在React之外進行DOM操作會導致問題，對嗎？

因此，我已經完成了，從我能想到的，我想象的東西不是最好的解決方案：

(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狀態。 我現在很困惑如何切換ul#menu的.active類，或者其他組件如何響應此操作。 （類似於jQuery中的selector $('.menu-can-toggle') 。

我相信這只是一個關於這個任務的新范例或方法的問題，但我發現的一切似乎與React CSSTransitionGroup等非常復雜，我只是想知道是否有一種標准的方法來實現簡單與上面的jQuery （基本上是單行）一樣的任務。

Answer 1

將函數放在ul中，根據“open”的值切換類名。 例如，顯示（阻止或無）。

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

基本上，jQuery正在尋找節點並添加/刪除類。 重新繪制組件（onclick +狀態更改）時，必須使用代碼修改“虛擬DOM”。 React會處理剩下的事情。