如何使用Reagent动态更改CSS类名？

Question

关于reagent。

我需要动态更改一些CSS类名，该如何实现？

以下是示例代码。

(defn app []
  (let [array [1, 2, 3]]
    (fn []
      [:div
       (for [index array]
         ;; I wanna change this classname like `item-1, item-2, ...`
         ^{:key index} [:div.i-wanna-change-this-classname-dynamically index])])))

- mitsuruog

Answer 1

改变

[:div.i-wanna-change-this-classname-dynamically index]

至

[:div {:class (str “item-” index)} index]

Reagent提供了一种简写语法：:div.class1.class2#id，但你也可以将它们作为向量中:div后的第一项以映射方式设置。

此外，请记住CSS的:nth-child()选择器，这是另一种动态样式的选项。

- Daniel Compton