通过计算大小对跨度进行排序的试剂组件

Question

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

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

所以这可能是势在必行通过

• 创建临时的，无形的容器元素
• 附加包含单词一些跨到它
• 他们排序解决了他们的offsetWidth
• reappending他们相应

什么是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]])]))) 

裁判函数可以记录关于元素的信息。