計算されたサイズでスパンを注文する試薬コンポーネント

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

:ref機能を使用することです。