更新

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])])

由于您正在打cup，因此您可以使用任何clojure代码来映射或循环遍历您的数据。

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

更新

1 个答案: