react函数式组件获取元素大小宽度的用法

在jquery中，通过$符号可以获取div的宽度和高度，但是在react中。

1.  
   var width = $("#main").width();
2.  
   var height = $("#main").height();

可以通过几种方法来获取

1.通过ref获取

        通过将div保存为一个ref或者ref的回调函数进行参数获取

2.通过useEffect

1.  
   useEffect(()=>{
2.  
   var box = document.getElementById("mainLayout")
3.  
   console.log(box.offsetHeight);
4.  
   },[])

通过钩子函数获取到宽度

在外层使用useState可以接到useEffect里面的变量

const [divHeight,setdivHeight] = useState()

1.  
   useEffect(()=>{
2.  
   var box = document.getElementById("mainLayout")
3.  
   console.log(box.offsetHeight);
4.  
   setdivHeight(box.offsetHeight)
5.  
   },[])

这样divHeight的值就得到了

这篇好文章是转载于：学新通技术网