reagent component that orders spans by their compu

问题:

I'm looking for a way to design a reagent component, which lists words sorted by their real(computed) widths, which they would have when rendered in the browser. (not the number of characters).

The real width of an html element can be determined by the JavaScript method offsetWidth. However, it looks that in order to get a result, the element must be appended somewhere in the DOM.

So this could be imperatively solved by

• creating a temporary, invisible container element
• appending some spans containing the words to it
• sort them by their offsetWidth
• reappending them accordingly

What would be the React/Reagent approach to it?

回答1:

One way is to use a :ref function

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

The ref function can record information about the element.