如何在 Reagent with Hiccup 中使用 takes all available space

Question

我正在尝试了解如何在 Reagent with Hiccup 中创建一个元素 takes all available space。所以调整大小 parent 我会得到 :component-did-mount 回调。

(defn chart [id col-width row-height]
  (let [dimensions (atom {})]
    (reagent/create-class
      {:component-did-mount
       (fn [e]
         (let [thisComponent (aget (js/document.querySelector ".app") "parentNode")
               width (aget thisComponent "offsetWidth")
               height (aget thisComponent "offsetHeight")]
           (swap! dimensions {:width width :height height})
           (println "----did mountwdth" width "--" height col-width row-height)
           (.log js/console thisComponent)))
       :reagent-render
       (fn [id col-width row-height]
         [:div
          [:div {:style {:background "gray"}} "--drag handle--"]
          [:div.non-dragable
           [simple-bar id]
           [tchart id col-width (int (- row-height controls-height))]]])})))

我希望图表元素占用所有可用的 space。

Answer 1

像 ComponentDidMount 这样的 React 生命周期回调不会对组件大小变化做出反应。

如果您想在组件大小发生变化时触发回调 - 您需要使用一些第三方 React 库，例如 react-measure or react-sizeme

另一种策略是在 window 调整大小时添加一个事件侦听器，并从那里获取组件的父级大小。

Answer 2

为此我使用了 React Virtualized 的 AutoSizer。与 Reagent 集成的示例：

(ns example
  (:require
    [cljsjs.react]
    [cljsjs.react-virtualized]
    [goog.object :as gobject]
    [reagent.core :as r]))

(defn autosizer-example
  []
  (r/with-let [width (r/atom 500)
               _ (js/setTimeout #(reset! width 1000)
                                1000)]
    [:div {:style {:width (str @width "px")}}
     [:> js/ReactVirtualized.AutoSizer
      {:disableHeight true
       :disableWidth true}
      (fn [props]
        (let [width (gobject/get props "width")]
          (r/as-element
           [:div
            "Width of parent: " width])))]]))

文档：https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

如何在 Reagent with Hiccup 中使用 takes all available space

How in Reagent with Hiccup make an element with takes all available space

clojure

hiccup

clojurescript

reagent