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

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

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

可以通过几种方法来获取

1.通过ref获取

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

2.通过useEffect

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

通过钩子函数获取到宽度

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

const [divHeight,setdivHeight] = useState()

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

这样divHeight的值就得到了