javascript - 按计算尺寸订购的试剂组件

Question

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

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

所以这必须通过以下方式解决

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

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函数可以记录元素的信息。