在反应中计算元素尺寸的自定义钩子
在反应中计算元素尺寸的自定义钩子
在某些情况下，我们可能需要知道 react 中没有给定宽度和高度的元素的大小。
从“反应”导入 { useState, useEffect } 常量 useContainerDimensions = containerRef => {
常量 getDimensions = () => ({
宽度：containerRef.current.offsetWidth，
高度：containerRef.current.offsetHeight
}) const [尺寸，setDimensions] = useState({width: 0,height: 0}) 使用效果（（）=> {
常量句柄大小 = () => {
设置维度（获取维度（））
} 让维度超时 = setTimeout(() => {
if(containerRef.current) {
设置维度（获取维度（））
}
}, 100) window.addEventListener("resize", handleResize) 返回 () => {
清除超时（维度超时）
window.removeEventListener("resize", handleResize)
}
}, [容器引用]) 返回尺寸
} 导出默认使用ContainerDimensions
上面的自定义钩子将计算元素的尺寸并返回它，如果我们通过 参考 的一个元素。每当屏幕尺寸发生变化时，它都会重新计算尺寸。
为了通过包含像素来获取宽度和高度，可以使用 clientWidth 和 clientHeight 来代替 offsetWidth 和 offsetHeight。
例子
导出默认函数 App() {
常量 cartItemsContainerRef = useRef(null)
//容器的尺寸可以从宽高得到
常量 { 宽度，高度 } = useContainerDimensions(cartItemsContainerRef) 返回 （
<div ref={cartItemsContainerRef}>
...
</div>
)
}
谢谢阅读。关注我了解更多。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
