2

我一直在尝试并考虑通过 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])]

使用 Reagent，上述 Hiccup 将呈现为：

<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 核心库来操作这些样式，这很好。

4

1 回答 1

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>包含两个ListItems的无符号列表 ( )，这将是生成的 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粗体显示。

于 2017-10-23T13:13:30.270 回答