계산 된 크기로 스팬을 계산하는 시약 구성 요소

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

요소에 대한 정보를 기록 할 수있는 심판이 기능을 사용하는 것입니다.