clojure - 使用 Om，从嵌套映射生成嵌套 div

Question

假设我有以下 map :

(def m {"a" {"d" {}
             "e" {}}
        "b" {"f" {}
             "g" {"h" {}
                  "i" {}}}
        "c" {}})

我需要像这样渲染它:

(om.dom/div #js {} "a" 
  (om.dom/div #js {} "d")
  (om.dom/div #js {} "e"))

(om.dom/div #js {} "b" 
  (om.dom/div #js {} "f")
  (om.dom/div #js {} "g"
    (om.dom/div #js {} "h")
    (om.dom/div #js {} "i")))

(om.dom/div #js {} "c")

我该如何去做呢？我搞乱了 clojure.walk，但无法让它先调用叶子上的 om.dom/div，然后是直接 parent ，等等。

我认为解决方案可能涉及在给定子映射的 vals 上映射递归函数。它会将 map 分开，直到看到叶子，然后冒泡 om.dom/div 调用备份 map 。

到目前为止我有这个功能:

(defn build-tree [data]
  (apply dom/div #js {}
         (->> (clojure.walk/postwalk
                #(cond (map? %) (vec %)
                       (vector? %) %
                       (string? %) %) data)
              (clojure.walk/postwalk
                #(if (and (vector? %) (string? (first %)))
                   (apply dom/div #js {} %) %)))))

结果是:

在检查器中使用此:

---

生成嵌套 dom/ul 和 dom/li 元素的奖励积分..

Answer 1

在解决此类问题时，有时在 REPL 中生成类似于所需调用树的树结构会很有帮助。一旦结果看起来不错，将其转换为实际的调用树通常很简单。

例如，这是一个生成 om.dom/div 的函数以调用树为例；要在 ClojureScript 中使用，请按照评论中的指示进行调整:

(defn div [m]
  (for [[k v] m]
    ;; replace with (apply om.dom/div #js {} k (div v)) in CLJS
    (list* 'om.dom/div {} k (div v))))

调用示例:

(div {"a" {"d" {}
           "e" {}}
      "b" {"f" {}
           "g" {"h" {}
                "i" {}}}
      "c" {}})

上面的输出:

;; in CLJS, you'll want to use this as the ... in
;; (apply create-container-component initial-args ...)
((om.dom/div {} "a"
   (om.dom/div {} "d")
   (om.dom/div {} "e"))
 (om.dom/div {} "b"
   (om.dom/div {} "f")
   (om.dom/div {} "g"
     (om.dom/div {} "h")
     (om.dom/div {} "i")))
 (om.dom/div {} "c"))