在试剂中动态渲染组件的正确方法是什么？

Question

在 React 中动态渲染组件是其使用的基础。这很容易做到，如下所示：

  render() {
    return (
      <div className="blocks_loop">
        {this.props.blocks.map(block => (
          <div className="block" />
        ))}
      </div>
    )
  }

在此示例中，您将获得尽可能多的 div blocks。我试图用试剂来实现同样的目的，我在这篇文章中记录了其中的一部分。有例子出来的人做喜欢有这样一个，但他们似乎都包括的使用lists，我不希望使用-它只是不适合我的目的。我只想要和我放入的物品一样多的组件。

更新

我现在有这段代码试图遵循下面的答案，这意味着为my-map. 没有呈现任何内容并引发错误react-dom.development.js:507 Warning: Functions are not valid as a React child.：

(ns mapping-test.views
  (:require
   [re-frame.core :as re-frame]
   [mapping-test.subs :as subs]))

(defn main-panel []

  (def my-map {:a 1 :b 2 :c 3})

  (defn a-component []
    [:h1 "This is a component rendering"])

  (defn my-loop [my-map]
    (for [value my-map]
      [a-component]))

  (fn []
    [my-loop my-map]))

Answer 1

(defn my-component [blocks]
   [:div.blocks_loop
     (for [b blocks]
       [:div.block])])

由于您正在创建 hiccup，因此您可以使用任何 clojure 代码来映射或循环访问您的数据。