html - 在 Clojurescript/Reagent 中有两行的循环表体

Question

我在使用 clojurescript/试剂让我的 table 体正确排列时遇到问题。我实际上不确定这是我不了解在 html 中做什么还是什么...

目前我使用循环显示表体

(defn table-body [list-of-maps] 
[:tbody
  (for [one-map list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

问题是我需要在 for 外部和 for 内部使用一些 html 元素进行分组，对吗？如果我在两者上都使用 [:tbody]，它将弄乱与 [:thead] 部分的对齐。如果我使用 tbody 以外的元素，则会产生各种其他问题。如果我删除 for 循环中的 [:tbody] 和最后一个 [:tr]，一切看起来都很好。

编辑:我目前已经大大缩小了问题的范围。我的应用程序 ajax 获取并取消引用与表相关的数据。在这个重新渲染中，表格的格式被弄乱了。

Edit2:我发现了问题。

(defn test-body [list-of-maps]
[:tbody
  (for [one-map @list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

(defn test-head []
  [:thead
   [:th "key1"]
   [:th "key2"]
   [:th "key3"]
   [:th "key4"]
   [:th "key5"]
   [:th "key6"]
   [:th "key7"]])

(defn test55 []
  (let [list-of-maps (reagent/atom [])]
    (js/setTimeout (fn [] (reset! list-of-maps '({:key1 "a1" :key2 "a2" :key3 "a3" :key4 "a4" :key5 "a5" :key6 "a6" :key7 "a7" :key8 "a8"} {:key1 "b1" :key2 "b2" :key3 "b3" :key4 "b4" :key5 "b5" :key6 "b6" :key7 "b7" :key8 "b8"}))) 3000)
    [:table
     [test-head]
     [test-body list-of-maps]]))

本地图列表重新呈现表格的对齐方式时。

Answer 1

事实证明，这个问题可以通过将事物简单地视为向量来解决。您希望最终结果是什么样的向量？

[:tbody 
   [:tr 
      [:td "a1"] [:td "a2"] [:td "a3"] [:td "a4"] [:td "a5"] [:td "a6"] [:td "a7"]] 
   [:tr 
      [:td "a8"]] 
   [:tr 
      [:td "b1"] [:td "b2"] [:td "b3"] [:td "b4"] [:td "b5"] [:td "b6"] [:td "b7"]] 
   [:tr 
      [:td "b8"]]]

因此，以此为目标，我们着手让主体函数创建它。

(defn test-body [list-of-maps]
  (into [] (concat [:tbody] (apply concat (for [one-map @list-of-maps]
                                            [
                                             [:tr
                                              [:td (:key1 one-map)]
                                              [:td (:key2 one-map)]
                                              [:td (:key3 one-map)]
                                              [:td (:key4 one-map)]
                                              [:td (:key5 one-map)]
                                              [:td (:key6 one-map)]
                                              [:td (:key7 one-map)]]
                                             [:tr
                                              [:td (:key8 one-map)]]])))))

这是我的解决方案。可能有更好的。