在Reagent和Hiccup中如何使用占用所有可用空间的元素
在Reagent和Hiccup中如何使用占用所有可用空间的元素
提问于 2018-02-13 16:54:49
我正在尝试找出在Reagent和Hiccup中如何用占用所有可用空间的元素来制作元素。因此，我将得到一个resize parent :component- So 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))]]])})))我希望图表元素占用所有可用的空间。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-13 18:27:44
像ComponentDidMount这样的React生命周期回调不会对组件大小的变化做出反应。
如果您想在组件大小发生变化时触发回调，则需要使用一些第三方React库，如react-measure或react-sizeme
另一种策略是在调整窗口大小时添加一个事件侦听器，并从中获取组件的父大小。
Stack Overflow用户
发布于 2018-02-13 20:09:19
为此，我使用了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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48762824
复制相关文章
相似问题
腾讯云开发者
