如何在React with Om/Clojurescript(来自jQuery)中实现基本动画?
我正在潜入React with Om/Clojurescript,迄今为止我所有的前端工作都是与jQuery一起完成的,我在理解如何在jQuery中实现简单而常见的任务方面遇到了一个主要障碍 举一个非常简单的例子,一个切换菜单的按钮:如何在React with Om/Clojurescript(来自jQuery)中实现基本动画?,jquery,clojure,reactjs,clojurescript,om,Jquery,Clojure,Reactjs,Clojurescript,Om,我正在潜入React with Om/Clojurescript,迄今为止我所有的前端工作都是与jQuery一起完成的,我在理解如何在jQuery中实现简单而常见的任务方面遇到了一个主要障碍 举一个非常简单的例子,一个切换菜单的按钮: $('#hamburger-icon').click(function(){ $('.menu-can-toggle').toggleClass('active'); }); 据我所知,我无法在React中实现这个简单的jQuery功能,因为它在React
$('#hamburger-icon').click(function(){
$('.menu-can-toggle').toggleClass('active');
});
据我所知,我无法在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"))))
其中,当单击菜单触发器时,它将切换其:打开状态。我现在很困惑如何切换ul#menu
的.active
类,或者其他组件如何响应此操作。(类似于jQuery中的选择器$('.menu可以切换')
我相信这只是一个让我的头脑围绕一个新的范例或方法来完成这样一项任务的问题,但我发现etc的一切似乎都非常复杂,我只是想知道是否有一种标准的方法来完成简单的任务,比如上面的jQuery。在ul中放置一个函数,该函数根据“open”的值切换类名。例如,display(block或none)
基本上,jQuery是查找节点和添加/删除类。当重新绘制组件(onclick+状态更改)时,您必须用代码修改“虚拟DOM”。React将处理其余部分
(defn display [open]
(if open
#js {}
#js {:display "none"}))