小编wov*_*ead的帖子

我想创建一个 html 元素列表（其中包括查询结果），默认情况下这些元素是隐藏的，但用户可以切换该状态。我在下面尝试了几种不同的方法作为玩具示例，但都无法工作。

此代码正确创建了三个按钮，它们正确地更改了 exps 状态，但不会隐藏内容。

(:require  [reagent.core :as r] )
(def exps (r/atom [true true true]))
(defn like-component []
  [:div   
   (for [ [i r] (map-indexed vector  ["A" "B" "C"])] 
     [:div
       [:button {:on-click #(swap! exps update-in [i] not)}]
       (when (nth @exps i)
          [:pre (str i r)])])])

(r/render [like-component]
      (js/document.getElementById "app")) 

另一方面，下面的代码将仅创建一个元素，但它可以正常工作。

(defn expandable-view [e bool]
  (let [expanded (r/atom bool)]
          (fn []
            [:li
            [:div.expandable
              [:div.header {:on-click #(swap! expanded not)}
               "Click me to expand and collapse"]
              (if @expanded
                [:div.body  (allow-html :pre e)])]]))) …