在 react hook 中可以使用 useRef() 来获取到动态 dom 的高度

1. 先引入hook useRef 方法

import React, { useRef, useState, useEffect } from 'react'

2. 在dom上绑定这个方法

const DcModule: React.FC = (props) => {
    const saveRef = useRef();
    const [height, setHeight] = useState(0);
    useEffect(() => {
        setHeight(saveRef.current.clientHeight);
    },[])
    handleClick(e) {
        const {clientWidth, clientHeight} = saveRef.current;
        console.log('====================================');
        console.log(clientWidth, clientHeight, saveRef.current);
        console.log('====================================');
    }
    console.log(height)   
    return  <div ref={saveRef} onClick={handleClick}> 获取高度</div>
}

这样不管 ul 是循环动态高度还是固定写死的高度，都可以直接获取到了。

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 Ref (opens new window) 来实现。