H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】document.getElementById返回null

import React, { useState } from "react";
import Child from "./component/Child";

const Demo: React.FC = () => {

    //获取当前页面的宽高
    var container: any = document.getElementById('table')
    var maxWidth = container?.clientWidth
    var maxHeight = container?.clientHeight

    console.log(container);
    console.log('maxWidth:', maxWidth);   
    console.log('maxHeight:', maxHeight);  

    const renderPage = () => {
        if (...) {
            return (
                <>
                    ...
                </>
            )
        }
        return (
            <>
                ...
            </>
        )
    }

    return (
        <div id='table'>
                {renderTable()}

                <Child/>
        </div>
    )
}
export default Demo

如上述代码所示,使用react函数组件写的一个页面,想使用document.getElementById获取该页面的宽高,但是打印container返回null,maxWidth和maxHeight返回undefined

请问为什么会获取不到呢,应该如何修改呢?

回答:

应该是因为获取的时候,dom还没建出来。React组件有生命周期, 改成这样试试:

const Demo: React.FC = () => {

useEffect(() => {
    const container: any = document.getElementById('table')
    console.log(container);
  },
  []
);

 return ( <div id='table'></div>)

}

回答:

应该在组件渲染完成之后的生命周期函数内获取dom

本文地址:H5W3 » 【前端问题精选】document.getElementById返回null

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址