Компонент реагента, упорядочивающий участки по их вычисленным размерам

Question

Я ищу способ разработки компонента реагента, который перечисляет слова, отсортированные по их реальной (вычисленной) ширине, которую они имели бы при визуализации в браузере. (не количество символов).

Реальная ширина html-элемента может быть определена методом JavaScript offsetWidth, Тем не менее, похоже, что для получения результата элемент должен быть добавлен где-то в DOM.

Так что это может быть решено

• создание временного невидимого элемента контейнера
• добавив к нему несколько интервалов, содержащих слова
• сортировать их по их смещению
• повторно их соответственно

Каков будет подход 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 может записывать информацию об элементе.