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

Question

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

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

在此示例中，您将获得与 blocks 一样多的 div 渲染。我正在尝试使用试剂来实现相同的目标，其中一部分我已在this 帖子中记录。有一些人这样做的例子，比如this 之一，但它们似乎都包括使用我不想使用的lists - 它只是不符合我的目的。我只想取出与放入的物品一样多的组件。

更新

我现在有这段代码试图遵循下面的答案，这意味着为my-map 中的每个键值对呈现 3 个 div。什么都没有渲染，它会抛出错误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])])

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