Question

我一直在玩，并考虑通过ClojureScript，Reagent，Rum，Re-frame和Om中的各种抽象来使用React。但是有一件事我不确定要么是地址，也许是因为它是一个单独的问题，取决于人们如何看待它，并且有效地包括组件中的样式。虽然它完全有可能是我忽略的东西，但实际上是问题：

是否有某种方法可以将React的静态部分编译为每个组件CSS类而不是在组件的每个实例中进行内联？

时间示例！让我们列出一个列表，其中每个项目应该以特定的方式设置样式：

[:ul
 (for [i (range 3)]
   [:li {:style {:background-color (str "rgba(0, 0, " (* i 70) ", 255)")
                 :color "lightgrey"}}
    i])]

使用试剂，上述打嗝将呈现为：

<ul>
  <li style="background-color: rgb(0, 0, 0); color: lightgrey;">0</li>
  <li style="background-color: rgb(0, 0, 70); color: lightgrey;">1</li>
  <li style="background-color: rgb(0, 0, 140); color: lightgrey;">2</li>
</ul>

我们可以看到规则决定颜色可以被提取到CSS类规则中，该类附加到该元素。在这种特定情况下，HTML大小的差异不会很大，但是组件的每个规则或实例都会使差距变大。

总而言之：我喜欢保持与组件内部组件相关的所有内容，包括样式;我不喜欢内联和重复不必重复的内容。使用Clojure数据结构声明的样式，可以使用Clojure核心库来操作它们，这很好。

Answer 1

如果您使用Om Next，则可以使用fulcro-css库。以下是直接从链接复制的示例组件：

(defui ListItem
  static css/CSS
  (local-rules [this] [[:.item {:font-weight "bold"}]])
  (include-children [this] [])
  Object
  (render [this]
    (let [{:keys [label]} (om/props this)
          {:keys [item]} (css/get-classnames ListItem)]
      (dom/li #js {:className item} label))))

，这将导致以下css：

<style id="my-css">
.fulcro-css_cards-ui_ListItem__item {
  font-weight: bold;
}
</style>

如果ListItem的父级呈现包含两个<ul> s的无符号列表（ListItem），则这将是生成的DOM：

<ul>
  <li class="fulcro-css_cards-ui_ListItem__item">A</li>
  <li class="fulcro-css_cards-ui_ListItem__item">B</li>
</ul>

因此，样式保留在组件内部并转换为css类，从而避免内联重复。

此处A和B都将以粗体显示。

从ClojureScript中的React组件派生静态CSS

1 个答案: