开发卡处于静止状态，使卡变得不稳定

Question

我正在使用 quiescent 库作为我的反应包装器。我想使用 devcards，我有点希望它能正常工作，甚至认为没有像 om 那样的 quiescent 的宏（我对 devcards 不太了解还没有）。

无论如何，我已经用 figwheel 和所有东西进行了所有设置，并且可以正常工作，但是卡片 ui 有点古怪：

首先，这是我认为的相关代码：

(ns punt.core
  (:require [quiescent.core :as q]
            [quiescent.dom :as d])
  (:require-macros [devcards.core :refer [defcard]]))

(def div1 (d/div {}
                (d/h1 {} "hello")
                (d/p {} "paragraph")
                (d/h2 {} "second header")
                (d/p {} "another paragraph")))

(def div2 (d/div {}
                (d/h1 {} "a better hello")
                (d/p {} "my favorite pargrauph")))

(q/defcomponent vertical-split [left right percentage]
  (d/div {}
        (d/div {:style {:float "left"
                        :width (str percentage "%")
                        :height "400px"}}
                left)
        (d/div {:style {:float "right"
                        :width (str (- 100 percentage) "%")
                        :height "400px"}}
                right)))

(defcard fifty-fifty
  "Description"
  (vertical-split div1 div2 50))

(defcard fifty-fifty
  (vertical-split div1 div2 80))

现在卡片的内容看起来和我想象的一样，但是每张卡片的标题栏都有些疯狂地延伸。其实一张图比解释更有帮助，所以你去：

我的诊断是 devcards 不知何故无法识别我用 quiescent 制作的 html，所以它只是没有将其放入卡中。然后它出于某种原因呈现 html，然后呈现下一张卡片，我猜标题栏被编程为一直延伸到前一张卡片，因此与我制作的内容重叠。

所以我想我的基本问题是如何将 quiescent 与开发卡一起使用。

Answer 1

答案简单到令人震惊，这表明我缺乏 html 和 css 知识。通过使容器 div 使用 overflow: auto，它们将扩展卡片以包含实际内容。

开发卡处于静止状态，使卡变得不稳定

Quiescent with devcards making cards go wonky

clojurescript

reactjs