3

我正在使用 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状态。我现在很困惑如何切换 的.active类ul#menu，或者其他组件如何响应此操作。（类似于$('.menu-can-toggle')jQuery 中的选择器。

我相信这只是让我了解一个新的范例或方法来完成这样的任务，但是我发现的所有东西对于React CSSTransitionGroup等似乎都非常复杂，我只是想知道是否有一种标准的方法来实现简单与上面的（基本上是单行的） jQuery类似的任务。

4

1 回答 1

0

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

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

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

于 2015-10-26T13:32:15.073 回答