通過計算大小對跨度進行排序的試劑組件

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]])]))) 

裁判函數可以記錄關於元素的信息。