3

私は Om/Clojurescript を使用した React に飛び込んでおり、これまでのすべてのフロントエンド作業で jQuery を使用してきました。jQuery でワンライナーである単純で一般的なタスクを達成する方法を理解するための大きな障害があります。

非常に単純な例として、メニューを切り替えるボタンを取り上げます。

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

http://jsbin.com/tufisufaha

私の理解では、この単純な jQuery 機能を React に実装することはできません。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などで信じられないほど複雑に見えます.シンプルを達成する標準的な方法があるかどうか疑問に思っています.上記の(本質的には 1 行の) jQuery のようなタスク。

4

1 に答える 1

0

「open」の値に基づいてクラス名を切り替える関数を ul に入れます。たとえば、表示 (ブロックまたはなし)。

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

基本的に、jQueryはノードを見つけてクラスを追加/削除しています。コンポーネントが再描画される (onclick + 状態の変更) 場合、「仮想 DOM」をコードで変更する必要があります。あとは React がやってくれます。

于 2015-10-26T13:32:15.073 に答える