jquery - 如何使用 Om/Clojurescript(来自 jQuery)在 React 中实现基本动画？

Question

我正在使用 Om/Clojurescript 深入研究 React，到目前为止，我所有的前端工作都使用 jQuery，在理解如何实现 jQuery 中的简单且常见的任务方面，我遇到了一个主要障碍。

举一个非常简单的例子，一个切换菜单的按钮:

$('#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 中的选择器 $('.menu-can-toggle')。

我相信这只是让我的头脑围绕一个新的范例或方法来完成这样的任务的问题，但我发现的所有内容似乎都非常复杂 React CSSTransitionGroup等等，我只是想知道是否有一种标准方法来实现简单的任务，例如使用上面的(基本上是单行) jQuery。

Answer 1

在 ul 中放置一个函数，根据“open”的值切换类名。例如，显示(阻止或无)。

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

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