Clojure列表理解和试剂的唯一值
假设这个网格的值可以是0或1:Clojure列表理解和试剂的唯一值,clojure,list-comprehension,reagent,hiccup,Clojure,List Comprehension,Reagent,Hiccup,假设这个网格的值可以是0或1: (def grid [[1 0 1] [1 0 0] [1 0 1]]) 现在,我想使用列表理解将grid转换为类似html的格式: (defn cell-component [is-it-1 key] ^{:key key} [:td (if (= is-it-1 1) {:class "is-it-1"})]) (defn grid-html [] ([:table [:tbody (for
(def grid [[1 0 1]
[1 0 0]
[1 0 1]])
现在,我想使用列表理解将grid
转换为类似html的格式:
(defn cell-component [is-it-1 key]
^{:key key} [:td (if (= is-it-1 1) {:class "is-it-1"})])
(defn grid-html []
([:table
[:tbody
(for [row grid]
^{:key row} [:tr
(for [cell row]
(cell-component cell how-i-can-generate-a-index?))])]]))
表生成正确,但我不知道如何为我的
td
创建唯一索引。什么如何生成索引?
应该是什么?您只需调用gensym
:
(cell-component cell (gensym))
这是一种通用的方法。但是,通常最好在数据中找到一些已经提供了独特区别的属性
如果您希望看到数字从0开始计数,则可以编写自己的序列生成器:
(def uniq-key (atom -1))
(defn gen-key []
(swap! uniq-key inc))
第一次调用(gen键)
时,您将返回0,第二次调用1等。您只需调用gensym
:
(cell-component cell (gensym))
这是一种通用的方法。但是,通常最好在数据中找到一些已经提供了独特区别的属性
如果您希望看到数字从0开始计数,则可以编写自己的序列生成器:
(def uniq-key (atom -1))
(defn gen-key []
(swap! uniq-key inc))
在您第一次调用(gen key)
时返回0,第二次返回1等。在您的情况下,每个单元格都由其在行中的索引唯一标识。此外,在父结构中指定子项的键比在组件中指定子项的键更为自然:
(defn cell-component [is-it-1]
[:td (if (= is-it-1 1) {:class "is-it-1"})])
(for [[i cell] (map-indexed vector row)]
^{:key i} [cell-component cell])
请注意,您应该类似地将基于索引的键分配给行-^{:key row}
如果表中有重复的行,则将不起作用。在您的情况下,每个单元格都由其在行中的索引唯一标识。此外,在父结构中指定子项的键比在组件中指定子项的键更为自然:
(defn cell-component [is-it-1]
[:td (if (= is-it-1 1) {:class "is-it-1"})])
(for [[i cell] (map-indexed vector row)]
^{:key i} [cell-component cell])
请注意,您应该类似地将基于索引的键分配给行-^{:key row}
如果表中有重复的行,则将不起作用。我建议将接受道具和子项的试剂组件定义为参数
(defn my-li
[:keys [a-string]]
[:li
a-string])
(defn my-list
[{:keys [color]} & children]
[:ul
{:style {:background-color color}}
(map-indexed #(with-meta %2 {:key %1}) children)])
(defn thelist []
[my-list
{:color "#ccc"}
[my-li "one"]
[my-li "two"]])
根据改编,我建议定义接受道具
和子项
作为参数的试剂成分
(defn my-li
[:keys [a-string]]
[:li
a-string])
(defn my-list
[{:keys [color]} & children]
[:ul
{:style {:background-color color}}
(map-indexed #(with-meta %2 {:key %1}) children)])
(defn thelist []
[my-list
{:color "#ccc"}
[my-li "one"]
[my-li "two"]])
改编自我可以这样做,但使用
gensym
将生成一个新符号,试剂的所有点和关键属性是在数据中具有唯一的id。您知道如何创建从0到(网格大小*网格大小)的索引吗?如果不是,我可能会一直按照你说的做,并在我的数据上添加一些元数据。我可以这样做,但使用gensym
会生成一个新符号,试剂的所有点和关键属性是在数据中有一个唯一的id。您知道如何创建从0到(网格大小*网格大小)的索引吗?如果没有,我可能会一直按照你说的做,并在我的数据中添加一些元数据作为旁注:grid html
中[:table…]
周围的圆括号是多余的(当它们转换为函数调用时,代码不会与它们一起运行-而你只需要返回组件:(defn grid html[][:table[:tbody…])
)只需使用映射索引
而不是for。作为补充说明:网格html
中[:table…]
周围的圆括号是多余的(当它们转换为函数调用时,代码不会与它们一起运行,而您只需要返回组件:(defn grid html[:table[:tbody…])
)只需使用地图索引
,而不是for。