在ClojureScript、Om和React.js中使用内联样式字符串

Question

我想在我的ClojureScript应用程序中使用这个Om代码片段：

    (dom/img
     #js {:className "img-circle"
          :src "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
          :style "width: 140px; height 140px;"
          :alt "Generic Placeholder Image"})

这会导致整个页面的渲染停止！

我认为原因与React.js如何处理样式有关。根据内联样式：

在React中，内联样式不是以字符串形式指定的。相反，它们是使用一个对象来指定的，该对象的键是样式名称的驼峰命名版本，值是样式的值，通常是一个字符串。

有什么好的方法可以解决这个问题吗？我通常不喜欢使用内联样式，但我想知道如何使这个示例工作。

- David J.

Answer 1

我在Om源代码中找到了一个例子，试着用了一下，结果可行：

    (dom/img
     #js {:className "img-circle"
          :src "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
          :style #js {:width "140px" :height "140px"}
          :alt "Generic Placeholder Image"})

- David J.

---

你不必明确地写出 px 单位。有时候这很方便。 - Aleš Roubíček

Om希望样式是一个（JavaScript）映射，而不是一个字符串。 - prabhasp