按计算大小排序的试剂成分

Question

我正在寻找一种设计试剂组件的方法，该组件列出按真实（计算）宽度排序的单词，这些单词在浏览器中呈现时会具有这些宽度。（不是字符数）。

html 元素的实际宽度可以通过 JavaScript 方法 offsetWidth 确定。但是，看起来为了获得结果，必须将元素附加到 DOM.

中的某处

所以这可以通过

强制解决

创建一个临时的、不可见的容器元素
附加一些包含单词的 span
按偏移宽度对它们进行排序
相应地重新附加它们

React/Reagent 方法是什么？

Answer 1

一种方法是使用 :ref 函数

(defn sorted-by-width []
  (let [ss (reagent/atom {"the" nil
                          "quick" nil
                          "brown" nil
                          "fox" nil})]
    (fn a-sorted-by-width []
      [:ul
       (for [[s width] (sort-by val @ss)]
         ^{:key s}
         [:li
          [:span
           {:ref (fn text-ref [elem]
                   (when elem
                     (swap! ss assoc s (.-width (.getBoundingClientRect elem)))))
            :visibility (if width "visible" "hidden")}
           s]])])))

ref函数可以记录元素的信息。

按计算大小排序的试剂成分

reagent component that orders spans by their computed sizes

html

javascript

clojurescript

reactjs

reagent