在反应中计算元素尺寸的自定义钩子

在某些情况下，我们可能需要知道 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>  
 )  
 }