React - 使用dangerouslySetInnerHTML后如何获取html元素尺寸

Question

我可以在React中通过dangerouslySetInnerHTML设置innerHtml之后获取html元素的高度吗？我尝试了 useRef，但我仍然得到“0”高度，可能在我尝试读取其尺寸时该元素未填充。

export const CustomText: React.FunctionComponent<{text: string}> = ({text}) => {

    const ref = useRef<HTMLDivElement>(null)
    const [height, setHeight] = useState(0)

     useEffect(() => {
         document.onload = (()=> {
             if (ref!= null && ref.current != null) {
                 setHeight(ref.current.offsetHeight)
                 console.log("height: " + height)
             }
         })
     }, []);

    return (
        <Stack>
           <Typography>
             <div ref={ref} dangerouslySetInnerHTML={{__html: text}}></div>
           </Typography>
        </Stack>
    )
}

我想获取 div html 元素在未填充字符串后的实际高度，但在我阅读它时元素为空。

Answer 1

将

ref.current

添加到依赖数组中，这样当它从null变为HTML元素时，它就会再次运行。

useEffect(() => {
        document.onload = (() => {
            if (ref != null && ref.current != null) {
                setHeight(ref.current.offsetHeight)
                console.log("height: " + height)
            }
        })
    }, [ref.current]);