按其计算大小排序的试剂组件

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